基于Vue2 搭建移動端 webapp 架構

Vue.js2.0作為國内熱門并廣為人知的前端架構，其與其他主流架構的優勢在此不做過多贅述。搭建架構步驟如下：

轉自；http://www.jianshu.com/p/beae26e57b0f

安裝Node.js

搭建架構需要使用最新穩定版Node.js，請選擇LTS版本。

tip1：如果本機有其它項目需要早期版本，建議利用NVM在本機分别部署多個版本的Node，以便在使用本架構時切換至最新穩定版即可。

tip2:無法FQ的童鞋，建議使用cnpm，安裝後在以下指令中将

npm

替換成

cnpm

即可；

安裝Git

運用vue-cli

本架構利用vue-cli腳手架快速搭建基礎架構；

安裝vue-cli

使用webpack模闆

本文示例運作于vue-cli(v2.8.1),指令行提示如下：

? Project name (my-project)                   //請輸入項目名稱，回車預設
? Project description (A Vue.js project)      //請輸入項目描述，回車預設
? Author xsl <
           

如果對于eslint報錯并不明白的，可以參考eslint官方文檔提供ESLint代碼檢查規則索引;

安裝vendor

本架構中需要利用vue-router作為前端路由，如果與本示例相同版本vue-cli，無需單獨引入，在初始化時直接選擇安裝即可；

本架構中需要運用Vuex作為公用狀态管理，這基于業務功能的複雜度，可選用，引入方式如下；

//請進入工程文檔目錄中運作以下指令
npm install vuex --save
           

本架構是運用于搭建移動端APP，選用餓了麼移動端UI庫——mint UI

//請進入工程文檔目錄中運作以下指令
npm install mint-ui --save
           

部分架構提升

ES6+新特性支援

由于webpack模闆裡的babel預設隻選用了ES2015以及stage-2，對于需要使用其它ES新特性來說，是以我們可能需要添加新的依賴，并修改babel配置；

npm install babel-preset-es2016 -D
npm install babel-preset-es2017 -D
npm install babel-preset-stage0 -D
           

.babelrc修改presets屬性如下

"presets": [["es2015",{ "modules": false }], 
              "es2016",  
              "es2017", "stage-0", "stage-2"]],
           

按需引入

安裝babel-plugin-component

.babelrc修改plugins屬性如下

"plugins":"plugins": ["transform-runtime",["component", [
    {
      "libraryName": "mint-ui", "style": true } ]]],
           

這樣我們就不必在需要在元件内單獨引用mint UI樣式。

webpack

我們選用的打包工具為webpack，正如你看到我們選用的是webpack的模闆，雖然大量通用性配置已經配好，即使你不了解它并不會對使用架構産生影響，但作者還是建議你去了解他，特别是作者獨家提供了中文版webpack2新手指南