基于Vue2 搭建移动端 webapp 框架

Vue.js2.0作为国内热门并广为人知的前端框架，其与其他主流框架的优势在此不做过多赘述。搭建框架步骤如下：

安装Node.js

搭建框架需要使用最新稳定版Node.js，请选择LTS版本。

tip1：如果本机有其它项目需要早期版本，建议利用NVM在本机分别部署多个版本的Node，以便在使用本框架时切换至最新稳定版即可。

tip2:无法翻墙的童鞋，建议使用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 <398818817@qq.com>               //请输入作者名，回车默认
? 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": ["transform-runtime",["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]],

---

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

webpack

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

作者：炎武森禄
链接：https://www.jianshu.com/p/beae26e57b0f
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

------------------------------------

1、vue项目

• 通过vue-cli脚手架建立项目，使用webpack进行打包，下边是一整套命令。

#npm 版本最好是最新的，升级npm，node版本也有要求
npm  i -g npm

# 安装脚手架
npm install -g vue-cli

#初始化新建项目
vue init webpack vue-app

# install dependencies
# config/index.js 里可以修改端口
npm install

# serve with hot reload at localhost:8080
npm run dev

# 打包项目
npm run build

# build for production and view the bundle analyzer report
npm run build --report

• 在index.html加入如下标签，不让他放大缩小

<meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

npm run build 打包项目的时候，要修改config/index.js文件，如图所示

assetsPublicPath 默认是根路径，改成当前相对路径，或者为空也行

productionSourceMap 用来支持打包后的调试，改为false,打包比较快

打包后的文件会放到项目根路径下的dist里边，后边会用到。

• 复制文件

因为webpack无法将你的图片等资源放到合适位置，你运行index.html, 就会发现他请求的图片地址是css/static/img，所以在package.json加入如下两条命令。然后修改build命令，让他压缩完代码之后顺便执行复制命令，这样就不用每次动手去拷贝文件了。

"build": "node build/build.js && npm run fixfont && npm run fiximg",
"fixfont": "xcopy %cd%\\dist\\static\\fonts %cd%\\dist\\static\\css\\static\\fonts /s /y /d /e /i",
"fiximg": "xcopy %cd%\\dist\\static\\img %cd%\\dist\\static\\css\\static\\img /s /y /d /e /i"

npm run build

*注意:打包好的index.html不能直接用浏览器打开，打包的时候有提示。可以通过ide开发工具将index.html跑起来，看有没有什么错误，我这会提示图片404找不到,很郁闷他的请求路径，最后按照他的路径，吧img放到了css文件夹下。

---

2、cordova项目

打包好的vue H5项目需要使用cordova来打包成Android和ios项目。支持跨域 cordova官网命令介绍

创建一个cordova项目,app名称mapp，包名（bundle id）是com.trgis,项目名是cordova-app

npm install -g cordova

cordova create cordova-app com.trgis mapp

将vue项目中打包后dist目录下的文件全部拷贝到cordova项目的www目录下

cd cordova-app

打包ios或者android，本人用的是Android环境

cordova platform add ios --save

cordova platforms add android --save

这一步完成后，在项目platforms文件夹下会发现多了文件夹，本人是Android环境，打包后的项目名是android。到这说明vue和cordova整合已经成功了。

3、使用androidstudio打包apk

cordova有提供命令支持编译apk的命令，但是本人实在受不了那个速度，慢死了。所以才去Androidstudio进行编译。直接使用as打开cordova项目下platforms 里边的Android项目，会提示你升级gradle版本之类的，最好都升级。用as直接安装在真机上进行调试，到此Android打包完成，ios本人目前没有环境，后期会更新帖子。

4、使用xcode8进行打包 —-只能在mac系统上进行

• 创建ios项目
  首先的在mac上安装node,然后用node安装codorva，然后新建cordova项目

cordova platform add ios --save

• 安装xcode

  在appstore里安装xcode8，如果你的mac系统还没有更新，还是更新一下，因为xcode8对系统版本有影响。安装时间可能比较长，建议大家多等一会。安装好以后，用xcode打开刚才新建的ios项目，或者也可以在ios下面双击配置文件，默认会打开xcode，并加载项目。好吧，接下来就要搞一些烦人的操作了，ios就是麻烦。

• xcode8 修改 app 应用图表

  ios的图表限制比较严格，一般的图表扔进去，编译都过不了，这里我们使用App Icon Gear 进行生成icon。在appstore搜索安装App Icon Gear，免费试用。双击打开，按照图片选择。
  

按照图片选择好以后，将app的图表，拖到左边第一个框，这时候他就就会自动生成

这么多图片自己替换又不现实，当然也提供批量修改的功能，打开xcode将icon的文件夹，拖到那个绿色箭头的框里，按照图片操作，他就会批量替换。

如果发现打包好的图片不对以后，在这里选择Appicon,其实就是找刚才生成的那个icon的文件，好了，到这里xcode8修改app icon图表就算完成了。至于欢迎页，和这步骤一样，只不过第一步选择的时候，要选择横屏还是竖屏。如果看完这个操作失败了，不要灰心，再来一次，如果还是失败了，点击查看视屏教程

转自：http://blog.youkuaiyun.com/yp090416/article/details/75367154