快速構建vue-cli（vue腳手架）

vue-cli 是vue.js的腳手架，用於自動生成vue.js模板工程的。

 一、使用npm安裝vue-cli

   須要先裝好vue 和 webpack（前提是已經安裝了nodejs，不然連npm都用不了）

　　npm install -g vue       //全局安裝vue
　　npm install -g webpack   //全局安裝webpack
　　npm install -g vue-cli   //全局安裝vue-cli

　

　　注意：上面這些裝過一次以後都不須要再安裝了

二、使用vue-cli構建vue項目

vue init webpack my-project    //生成項目名爲my-project的模板

命令輸入後，會進入安裝階段，須要用戶輸入一些信息:

Project name (vuetest)                    項目名稱，能夠本身指定，也可直接回車，按照括號中默認名字（注意這裏的名字不能有大寫字母，若是有會報錯Sorry, name can no longer contain capital letters），阮一峯老師博客爲何文件名要小寫 ，能夠參考一下。

Project description (A Vue.js project)  項目描述，也可直接點擊回車，使用默認名字

Author (........)       做者（隨便你）

Runtime + Compiler: recommended for most users    運行加編譯，既然已經說了推薦，就選它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   僅運行時，已經有推薦了就選擇第一個了

Install vue-router? (Y/n)    是否安裝vue-router，這是官方的路由，大多數狀況下都使用。

Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代碼，ESLint是個代碼風格管理工具，是用來統一代碼風格的，並不會影響總體的運行，這也是爲了多人協做，新手就不用了，通常項目中都會使用。ESLint官網

接下來也是選擇題Pick an ESLint preset (Use arrow keys)            選擇一個ESLint預設，編寫vue項目時的代碼風格，由於我選擇了使用ESLint

Standard (https://github.com/feross/standard)    標準，js的標準風格

AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法，這個github地址說的是JavaScript最合理的方法

none (configure it yourself)    本身定義風格 ，我選擇標準風格

Setup unit tests with Karma + Mocha? (Y/n)  是否安裝單元測試，教程未安裝

Setup e2e tests with Nightwatch(Y/n)?     是否安裝e2e測試 ，教程未安裝

 

cd my-project　　　　　　　　//進入到項目文件夾
npm install                    //初始化安裝依賴

如圖

3.啓動運行命令的：npm run dev

4.在瀏覽器中打開http://localhost:8080

5.通常項目目錄的簡要說明（與本案例不符，僅爲參考）

 

├── build
 
// 項目構建(webpack)相關代碼
 
│ ├── build.js
 
// 生產環境構建代碼
 
│ ├── check-versions.js
 
// 檢查node&npm等版本
 
│ ├── dev-client.js
 
// 熱重載相關
 
│ ├── dev-server.js
 
// 構建本地服務器
 
│ ├── utils.js
 
// 構建配置公用工具
 
│ ├── vue-loader.conf.js
 
// vue加載器
 
│ ├── webpack.base.conf.js
 
// webpack基礎配置
 
│ ├── webpack.dev.conf.js
 
// webpack開發環境配置
 
│ └── webpack.prod.conf.js
 
// webpack生產環境配置
 
├── config
 
// 項目開發環境配置
 
│ ├── dev.env.js
 
// 開發環境變量
 
│ ├── index.js
 
// 項目一些配置變量
 
│ └── prod.env.js
 
// 生產環境變量
 
├──node_modules
 
// 項目依賴的模塊
 
├── src
 
// 源碼目錄
 
│ │ ├── assets
 
// 資源目錄
 
│ │ └── logo.png
 
 
 
│ ├── components
 
// vue公共組件
 
│ │ └── Hello.vue
 
 
 
│ ├──router
 
// 前端路由
 
│ │ └── index.js
 
// 路由配置文件
 
│ ├── App.vue
 
// 頁面入口文件
 
│ └── main.js
 
// 程序入口文件
 
└── static
 
// 靜態文件，好比一些圖片，json數據等
 
│ ├── .gitkeep
 
 
 
├── .babelrc
 
// ES6語法編譯配置
 
├── .editorconfig
 
// 定義代碼格式
 
├── .gitignore
 
// git上傳須要忽略的文件格式
 
├── index.html
 
// 入口頁面
 
├── package.json
 
// 項目基本信息
 
├── README.md
 
// 項目說明