使用Vue腳手架(vue-cli)從零搭建一個vue項目(包含vue項目結構展現)

注：在搭建項目以前，請先安裝一些全局的工具（如：node，vue-cli等）

• node安裝：去node官網（https://nodejs.org/en/）下載並安裝node便可，安裝node之後就能夠正常使用npm命令
• 全局安裝vue-cli工具：npm install vue-cli -g
  

開始建立項目：

• 找一個合適的位置，打開命令窗口，使用vue初始化基於webpack的新項目

　　

vue init webpack vue-demo  //注意名稱太長的話它會有錯誤提示，就像VueDemo 咱們能夠寫成vue-demo就能夠了

 如上圖，它會又各類提示，還有須要安裝的東西，能夠自行按照本身的需求去安裝東西。

 生成之後它會在你剛開始選擇的位置生成一個現成的vue的一個項目架子，就像這樣：

啓動項目：

 

npm run dev

根據上邊的地址在瀏覽器菜單欄裏邊打開項目便可>

 項目啓動成功了，咱們能夠繼續咱們項目中所須要的工具，如：

npm install vue-router --save （路由管理模塊）
npm install vuex --save （狀態管理模塊）
npm install vue-resource --save （網路請求模塊）　　　

如下是腳手架生成的項目結構：

|-- build                            // 項目構建(webpack)相關代碼
|   |-- build.js                     // 生產環境構建代碼
|   |-- check-version.js             // 檢查node、npm等版本
|   |-- dev-client.js                // 熱重載相關
|   |-- dev-server.js                // 構建本地服務器
|   |-- utils.js                     // 構建工具相關
|   |-- webpack.base.conf.js         // webpack基礎配置
|   |-- webpack.dev.conf.js          // webpack開發環境配置
|   |-- webpack.prod.conf.js         // webpack生產環境配置
|-- config                           // 項目開發環境配置
|   |-- dev.env.js                   // 開發環境變量
|   |-- index.js                     // 項目一些配置變量
|   |-- prod.env.js                  // 生產環境變量
|   |-- test.env.js                  // 測試環境變量
|-- src                              // 源碼目錄（裏面能夠自定義文件結構）
|   |-- components                     // vue公共組件
|   |-- store                          // vuex的狀態管理
|   |-- App.vue                        // 頁面入口文件
|   |-- main.js                        // 程序入口文件，加載各類公共組件
|-- static                           // 存放靜態文件的文件夾，好比一些圖片，json數據等
|-- .babelrc                         // ES6語法編譯配置
|-- .editorconfig                    // 定義代碼格式
|-- .gitignore                       // git上傳須要忽略的文件格式
|-- README.md                        // 項目說明
|-- index.html                       // 入口頁面
|-- package.json                     // 項目基本信息，第三方依賴的文件列表