使用Vue-CLI構建項目(詳細）

構建需要用到npm和Nodejs,安裝過程參照npm安裝配置和Node安裝配置

1. 安裝cnpm: 打開CMD,輸入： npm install -g cnpm --registry=https://registry.npm.taobao.org
2. 然後輸入cnpm -v 若打印出版本號，則安裝成功。

• 在項目所要放置的文件目錄下打開CMD
• 輸入 vue init webpack myproject2 初始化項目（ps: myproject2是項目名稱）

模板下載完成後，Vue CLI引導我們進行項目配置

 

 是的話回車就行。

在這裏使用上下箭頭可以選擇，這裏我是選第一個，然後回車。 

 

 

 回車，完成。

 

 

Pick an ESLint preset     NO

Set up unit test    NO

Setup e2e tests with Nightwatch    NO

Should we run `npm install` for you after the project has been created?    NO

 

進入項目文件夾，安裝項目依賴，輸入cnpm install

 

 輸入npm start 啓動webpack-dev-server

 打開瀏覽器,輸入http://localhost:8081

然後， 在文件夾下查看myproject2

 另開一個控制檯，也是在myproject2文件夾目錄下，輸入npm run build構建項目的生產版本

 再次查看文件夾下myproject2,發現多了一個dist文件夾

 這樣，使用Vue-CLI構建項目就完成了。

Vue CLI 項目初始目錄

名稱	說明
build	開發和生產版本的構建腳本
config	開發和生產版本的部分構建配置
dist	由npm run build生成；項目的生產版本；項目完成後，交付該文件夾即可
src	項目開發的關鍵資源目錄和主要的工作區間
static	靜態資源（如使用JS賦值圖片的src時，該圖片的資源放在static目錄下
.babelrc	babel的配置文件（babel,下一代JS的預編譯器）
.eslintigore	ESLint代碼語法檢測的配置文件（應忽略的語法格式）
.eslintrc.js	ESLint代碼語法檢測的配置文件（應規範的語法格式）
.gitignore	應被Git版本控制工具忽略的文件
index.html	應被webpack注入資源的模板html文件