1. 程式人生 > 其它 >新建vue專案

新建vue專案

技術標籤:專案建立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)