使用 vue-cli 可以快速创建 vue 项目，vue-cli很好用，但是在最初搭建环境安装vue-cli及相关内容的时候，对一些人来说是很头疼的一件事情，本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑，特此写了一篇搭建环境的教程，每一步尽量详细解析。需要的朋友可以过来参考下。
vue-cli脚手架的优势：
- 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目.
- vue-cli是官方支持的一个脚手架，会随本版本进行迭代更新。
- vue-cli提供了一套本地的node测试服务器，使用vue-cli自己提供的命令，就可以启动服务器。
- 集成打包上线方案。
- 还有一些优点，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等，等大家深入使用下去就会发现vue-cli的强大之处。
本教程是基于windows系统。
下面正式开始搭建vue-cli脚手架。
Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板.
使用 vue-cli 可以快速创建 vue 项目，vue-cli很好用，但是在最初搭建环境安装vue-cli及相关内容的时候，对一些人来说是很头疼的一件事情，本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑，特此写了一篇搭建环境的教程，每一步尽量详细解析。需要的朋友可以过来参考下。
本教程是基于windows系统。
•在node.js中文官网http://nodejs.cn/正常下载安装node.js就可以，没有什么特别需要注意的点（傻瓜式安装）。
•在官网下载安装node.js后，就已经自带npm（包管理工具），不需要另外再进行安装npm了。
•注意下载node.js版本要在4.0以上，避免版本过低影响使用。
•打开命令行工具（随便哪个文件夹），输入命令行 node -v，npm -v，如下图，如果出现相应的版本号，则说明安装成功。
安装淘宝镜像
cnpm（淘宝镜像）相关：
- 这是一个完整 npmjs.org 镜像，是用来同步npm上面的模块。
- cnpm的同步频率为 10分钟 （新发布的模块有滞后性，同步是需要时间的，等不及的可以使用npm）。
- 安装cnpm的原因：npm的服务器是外国的，所以有时候我们安装“模块”会很很慢很慢超级慢。
- cnpm的作用：淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间。
- 安装完淘宝镜像之后，cnpm和npm命令行皆可使用，二者并不冲突
npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm install --global vue-cli
//安装webpack
$npm install webpack -g
// 使用 "webpack" 模板创建一个新项目my-project
$ vue init webpack my-project
// 安装依赖，然后开始！
$ cd my-project
//安装依赖
$ npm install
//启动服务
$ npm run dev
启动项目：
启动服务，服务启动成功后浏览器会默认打开一个“欢迎页面”.
vue-cli的模板
- vue-cli的脚手架项目模板有webpack-simple 和 webpack
- 两种的区别在于webpack-simple 没有包括Eslint 检查等功能
vue-cli的项目结构
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
.
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息
|
package.json文件
package.json文件是项目根目录下的一个文件，定义该项目开发所需要的各种模块以及一些项目配置信息（如项目名称、版本、描述、作者等）。
自定义npm相关命令
在package.json文件里有一个scripts字段。
|
1
2
3
4
|
"scripts"
: {
"dev"
:
"node build/dev-server.js"
,
"build"
:
"node build/build.js"
}
|
在开发环境下，在命令行中运行npm run dev就相当于在执行node build/dev-server.js。所以script字段是用来指定npm相关命令的缩写的。
dependencies字段和devDependencies字段
- dependencies字段指定了项目运行时所依赖的模块
- devDependencies字段指定了项目开发时所依赖的模块(项目环境依赖)
- 在命令行中运行npm install命令，会自动安装dependencies和devDependencies字段中的模块。
webpack配置相关
详情在webpack相关博客
dev-server.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
...
...
// http-proxy可以实现转发所有请求代理到后端真实API地址，以实现前后端开发完全分离
// 在config/index.js中可以对proxyTable想进行配置
var
proxyMiddleware = require(
'http-proxy-middleware'
)
...
...
// 热加载要使用webpack-dev-middleware在没有webpack-dev-server的时候进行热加载
var
hotMiddleware = require(
'webpack-hot-middleware'
)(compiler)
// 当html-webpack-plugin模板改变是强制进行页面重新加载
compiler.plugin(
'compilation'
,
function
(compilation) {
compilation.plugin(
'html-webpack-plugin-after-emit'
,
function
(data, cb) {
hotMiddleware.publish({ action:
'reload'
})
cb()
})
})
|
webpack.base.conf.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
...
...
module.export = {
// 编译入口文件
entry: {},
// 编译输出路径
output: {},
// 一些解决方案配置
resolve: {},
resolveLoader: {},
module: {
// 各种不同类型文件加载器配置
loaders: {
...
...
// js文件用babel转码
{
test: /\.js$/,
loader:
'babel'
,
include: projectRoot,
// 哪些文件不需要转码
exclude: /node_modules/
},
...
...
}
},
// vue文件一些相关配置
vue: {}
}
|
check-version.js
这个文件主要是用来检测当前环境中的node和npm版本和我们需要的是否一致的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
// 加载语义化版本测试库
var
semver = require(
'semver'
)
// 定制控制台日志的输入样式
var
chalk = require(
'chalk'
)
// 引入package.json文件
var
packageConfig = require(
'../package.json'
)
var
exec =
function
(cmd) {
return
require(
'child_process'
)
.execSync(cmd).toString().trim()
}
// 定义node和npm版本需求所组成的数组
var
versionRequirements = [
{
name:
'node'
,
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
{
name:
'npm'
,
currentVersion: exec(
'npm --version'
),
versionRequirement: packageConfig.engines.npm
}
]
module.exports =
function
() {
var
warnings = []
// 依次判断版本是否符合要求
for
(
var
i = 0; i < versionRequirements.length; i++) {
var
mod = versionRequirements[i]
if
(!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name +
': '
+
chalk.red(mod.currentVersion) +
' should be '
+
chalk.green(mod.versionRequirement)
)
}
}
...
}
|
.babelrc
Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里需要用它将ES6代码转为ES5代码
|
1
2
3
4
5
|
// 设定转码规则
"presets"
: [
"es2015"
,
"stage-2"
],
// 转码的一些插件
"plugins"
: [
"transform-runtime"
],
"comments"
:
false
|
.editorconfig
该文件定义项目的编码规范，编辑器的行为会与.editorconfig 文件中定义的一致，并且其优先级比编辑器自身的设置要高，这在多人合作开发项目时十分有用而且必要。
|
1
2
3
4
5
6
7
8
|
root =
true
[*]
// 对所有文件应用下面的规则
charset = utf-8
// 编码规则用utf-8
indent_style = space
// 缩进用空格
indent_size = 2
// 缩进数量为2个空格
end_of_line = lf
// 换行符格式
insert_final_newline =
true
// 是否在文件的最后插入一个空行
trim_trailing_whitespace =
true
// 是否删除行尾的空格
|