新建vue專案
阿新 • • 發佈:2021-01-03
技術標籤:專案建立vue.jsnode.jsjavascript
新建vue專案
一、
在搜尋欄輸入“cmd“回車
1. 安裝node.js
從node.js官網上下載,一路yes
檢視版本,判斷是否安裝成功
node -v(小寫v)
npm
node裡包含”npm“
輸入:
npm -v
最後結果
C:\Users\Administrator>node -v
v14.15.3
C:\Users\Administrator>npm -v
6.14.9
2.搭建依賴
一般採用淘寶映象
npm install -g cnpm --registry=http://registry.npm.taobao.org
3. 安裝vue-cil框架
輸入
npm install -g vue-cli
判斷安裝成功沒有
vue -V(大寫V)
結果:
vue -V
2.9.6
4.安裝 webpack打包工具
要安裝環境變數
要安裝環境變數
要安裝環境變數
重要的事說三遍!!
在控制面板\系統和安全\系統
計算機–屬性–高階系統設定–高階下的環境變數–path–增加F:\APP\nodejs\
和F:\APP\nodejs\node_global
二、
1. 新建專案
vue init webpack +專案名稱.
'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���
�������ļ�
? Project name y
? Project description y
? Author y
? Vue build runtime
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset none
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "Vue-mobian".
# Installing project dependencies ...
# ========================
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: [email protected]<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of [email protected]
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: Please update to v 2.2.x
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated reques[email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
新專案建立完成
找到建立的專案 執行npm run dev
點選http://localhost:8080
進入holler word
參考連結:(https://blog.csdn.net/zsjwenrou/article/details/91810324)
參考菜鳥連結:(https://www.runoob.com/w3cnote/vue2-start-coding.html)