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新手指南