构建vue-cli与cordova的开发环境

0、安装nodejs

一、安装vue-cli

1、使用npm全局安装vue-cli（前提是你已经安装了nodejs，否则你连npm都用不了），在cmd中输入一下命令

npm install --global vue-cli

2、创建自己的工作空间，在cmd切换至刚刚创建好的工作空间，如果已经有工作空间，直接切换到工作空间即可。使用命令创建一个叫做vuetest的项目

vue init webpack vuetest

命令输入后，会进入安装阶段，需要用户输入一些信息

Project name (vuetest) 项目名称，可以自己指定，也可直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters），阮一峰老师博客为什么文件名要小写 ，可以参考一下。

Project description (A Vue.js project) 项目描述，也可直接点击回车，使用默认名字

Author (……..) 作者，不用说了，你想输什么就输什么吧

接下来会让用户选择

Runtime + Compiler: recommended for most users 运行加编译，既然已经说了推荐，就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时，已经有推荐了就选择第一个了

Install vue-router? (Y/n) 是否安装vue-router，这是官方的路由，大多数情况下都使用，不过我的第一个项目中的路由是自己写的，没有使用到官方路由，因为有特殊需求，也因为比较早，官方尚未成熟，vue-router官网 。这里就输入“y”后回车即可。

Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码，ESLint是个代码风格管理工具，是用来统一代码风格的，并不会影响整体的运行，这也是为了多人协作，新手就不用了，一般项目中都会使用。ESLint官网

接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，因为我选择了使用ESLint

Standard (https://github.com/feross/standard) 标准，有些看不明白，什么标准呢，去给提示的standardgithub地址看一下， 原来时js的标准风格

AirBNB (https://github.com/airbnb/javascript) JavaScript最合理的方法，这个github地址说的是JavaScript最合理的方法

none (configure it yourself) 这个不用说，自己定义风格

具体选择哪个因人而异吧 ，我选择标准风格

Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试，我选择安装

Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ，我选择安装
完成

3、目录结构，

bulid 里面是一些操作文件，使用npm run * 时其实执行的就是这里的文件

config 配置文件，执行文件需要的配置信息

src 资源文件，所有的组件以及所用的图片都是在这个放着的简单看一下这个文件夹下都放了那些东西

src目录

• assets 资源文件夹，放图片之类的资源
• components 组件文件夹，写的所有组件都放在这个文件夹下，现在有一个写好的组件已经放到里面了
• router 路由文件夹，这个决定了也面的跳转规则
• App.vue应用组件，所有自己写的组件，都是在这个组件之上运行了，
• main.js webpack入口文件，webpack四大特性entry入口、output输出，loader加载器，plugins插件，可以再项目中build\webpack.base.conf.js第12行看到这个入口文件是哪个。

4、安装模块

cd vuetest

安装一来模块

npm install

这里只用了install是安装所有的模块，如果是安装具体的那个模块install 后面输入模块的名字即可，只输入install就按照项目的根目录下的package.json文件中依赖的模块安装，这个文件里面是不允许有任何注释的，每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，需要安装所有的模块，这就是为什么我们刚下载下来别人的项目时都需要先运行 npm install 命令，因为模块较多，文件比较大，所以没有上传模块，这个不需要上传那些文件的配置是在根目录下.gitignore配置的，这是git操作的配置文件，涉及到的git操作都要操作这个文件，可以没有，也可以什么都不写。这个安装时间比较长，再加上npm是国外的服务器，就更慢了，也可以再开始之前就讲npm切换到taobao镜像上，就相对会快一些，这里可以看一下阮一峰老师的npm 模块安装机制简介

安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块，如何将npm切换至cnpm

5、运行项目

npm run dev

6、打包项目，打包完成后，会在根目录下生成一个dist文件夹，这就是最后的成品页面（一会使用cordova把这里的网页编译成APP）

npm run build

二、安装和编译cordova

1、安装

npm install -g cordova

安装完成后可以使用cordova -v或者cordova -version验证一下是否安装成功

我们这样安装的cordova是最新版本的，如需安装其它版本，只需要在命令行npm install -g cordova后面加上“@版本号”就可以了。
例如安装5.4.1的版本：npm install -g cordov@5.4.1

因为cordova安装的版本是与android sdk版本有关的，我安装的是cordova 6.0.0，所有必须使用sdk版本android-23。如果你的sdk版本过低，可以考虑安装低一点版本的cordova。注意：这一定是相对应的！

这里也讲一下cordova的卸载命令，如果你不想用cordova或者是cordova安装错误可在cmd命令行窗口运行命令：npm uninstall cordova -g即可卸载cordova

1.1 gradle安装
cordova4.0.0以后,Android工程通过Gradle生成，安装后将bin添加到系统path中

2、创建项目，创建一个名字为cordovacheck的项目，包名是com.example.test

cordova create cordovacheck com.example.test

切换到项目cordovacheck文件夹下

3、添加平台，以Android平台为例，命令为：

cordova platform add android

当然除了android平台，你也可以添加其他的平台：

cordova platform add wp8 
cordova platform add windows 
cordova platform add amazon-fireos 
cordova platform add android 
cordova platform add blackberry10 
cordova platform add firefoxos

卸载平台命令：

cordova platform rm ios 
cordova platform rm firefoxos 
cordova platform rm windows 
cordova platform rm wp8 
cordova platform rm firefoxos 
cordova platform rm android 

查看自己已经安装的平台以及未安装的平台：

cordova platforms ls 

3、添加插件（视项目需求情况）例如：添加cordova-plugin-camera插件这里写代码片：

cordova plugin add cordova-plugin-camera

4、编译打包

将你写的一些html、css、js文件放到你建的项目（cordovacheck）目录下的www文件下对应的位置：

然后在命令行下输入以下命令：

cordova build android

然后就是静静的等待编译。。。

这代表打包成功了，然后在 项目\platforms\android\build\outputs 文件夹下找到apk安装文件，

在手机上测试运行即可。