基于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

npm install -g vue-cli

使用webpack模板

vue init webpack my-project

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

? Project name (my-project)                   //请输入项目名称，回车默认
? Project description (A Vue.js project)      //请输入项目描述，回车默认
? Author xsl <[email protected]>               //请输入作者名，回车默认
? Vue build                                   //请选择构建模式，请直接回车选择第一条 > Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere ? Install vue-router? Yes  //是否安装vue-router,回车 ? Use ESLint to lint your code? Yes  //是否安装ESLint代码检查器，回车 //个人比较偏爱airbnb的编码规范，此处选择第二项 Standard (https://github.com/feross/standard) >AirBNB (https://github.com/airbnb/javascript) none (configure it yourself) ? Setup unit tests with Karma + Mocha? Yes  //单元测试，请按需选择 ? Setup e2e tests with Nightwatch? Yes  //端到端测试，请按需选择

如果对于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

npm install babel-plugin-component -D

.babelrc修改plugins属性如下

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

---

这样我们就不必在需要在组件内单独引用mint UI样式。

webpack

我们选用的打包工具为webpack，正如你看到我们选用的是webpack的模板，虽然大量通用性配置已经配好，即使你不了解它并不会对使用框架产生影响，但作者还是建议你去了解他，特别是作者独家提供了中文版webpack2新手指南