vue-cli腳手架工具開發總結

寫在前面：在基本不懂後臺，不會打包工具的前提下，完成了一個基於vue-cli的spa音樂播放器後，決定作一些總結(純入門)，如下總結是針對剛學習vue和使用cli工具的。

項目地址

1、安裝配置

1.1 首先保證安裝了node

1.2 而後全局安裝vue-cli，創建項目

npm install -g vue-cli // 全局安裝
// 使用vue init建立基於webpack模板的項目
vue init webpack vue-demo // vue-demo爲項目名
cd vue-demo // 安裝成功後進入項目
npm install// 安裝項目的依賴

1.3 安裝成功之後，使用npm run dev運行項目就能看到官網的例子了

下面簡單看下項目結構：

-- 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                     // 項目基本信息

看到這麼多當時的確很懵逼，這裏只是簡單介紹下，不少咱們開發過程當中都是忽略不會改動的，固然你也能夠試着把每個都搞明白，初期徹底能夠跳過，遇到重要的再單獨學習。

2、router路由使用

vue-router在項目生成的時候已經安裝，配置路由主要在router的index.js中配置。
在compons中新增幾個組件做爲例子；
引用對應的組件，引用vue和vue-router模塊；
而後使用配置路由的參數和對應的路徑；

在App.vue中加入對應的路由地址
<router-link to="路由地址"></router>
組件會渲染在<router-view></router-view>中,更多詳細配置及傳遞參數等,請查看router官方文檔

咱們能夠發如今 index.js文件路徑有一個 @符號，這是項目預先配置的路徑別名，表示根目錄下的 src目錄,打開 build文件夾下的 webpack.base.conf.js能夠看到

3、vuex狀態管理的使用

npm install vuex --save //初始默認是沒安裝的

我的總結vuex通俗就是全局的狀態管理，能夠看作是一種全局對象，固然不單單是這樣。
看下官方文檔的解釋：

每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有如下兩點不一樣：

一、Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

二、你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用

仍是先看個簡單的例子：

在src目錄下創建store文件夾，新建index.js。

在main.js中引用並註冊store,這樣store就能夠在全局中使用了

咱們在App.vue和tab1.vue中同時監聽store的變化，點擊圖中的button咱們能夠看到state中count的變化。

友情提示

上圖查看 vuex狀態是 vue devtools開發工具，能夠實時查看 vue項目的各類組件、數據、方法、狀態等
vuex會在瀏覽器刷新後重置
更多詳細內容移步 vuex官方文檔

再添加一個axios，這樣一個最簡單的vue+vue-router+vuex的全家桶就實現了2333

4、開發過程當中常見的配置和包的引用

4.1 eslint

如上圖所示咱們打開控制檯進場看到有這樣相似的警告,卻不影響項目運行。其實這是eslint實現的代碼規範檢查，看截圖主要提示的一些代碼之間的空格，符號的規範使用。不想使用能夠在webpack.base.conf.js將eslint-loader的部分註釋，好像如今的vue-cli啓動之後在8081端口會有個不使用的eslint的版本

4.2 模板引擎,css預處理器

html: pug(原來叫jade)
css: sass(scss)/ less/ stylus (我用的scss)

npm install pug pug-loader pug-filters  --save-dev  // 安裝pug 及其依賴
npm install sass sass-loader node-sass --save-dev //安裝scss及其依賴

而後編寫一個實例的組件,template中用lang="pug",style中用lang="scss"，而後App.vue中註冊並引用組件就能看到效果了(如今版本的vue-cli中vue-loader會自動對組件中每一個模塊使用對應的loader)

結語：大概總結了一下前期開發中遇到的小問題。在實際開發中會加入各類各樣新的模塊，慢慢學習,後續再總結，最後求個star吧。