1，初始化项目
vue-cli 是Vue官方发布的项目脚手架，使用 vue-cli 可以快速创建 Vue + Webpack项目。
1
2
3
4
5
6
7
8
9
10
|
npm install -g vue-cli
# 全局安装vue-cli
vue init webpack myproject
# 创建vue项目，执行时，会提示输入项目的相关信息
cd myproject
# 进入项目
npm install
# 安装依赖包，新建node_modules文件夹，依赖包安装在此
npm run dev
# 本地运行，默认在http://localhost:8080，启动服务
|
2，目录结构说明
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
|
|--build //webpack相关代码文件夹
| |--build.js //生产环境结构代码
| |--check-version.js //检查node、npm等版本
| |--dev-client.js //热加载相关代码
| |--dev-server.js //本地服务器
| |--utils.js //构建工具
| |--vue-loader.conf.js //vue加载器
| |--webpack.base.conf.js //webpack基本配置
| |--webpack.dev.conf.js //webpack开发环境配置
| |--webpack.test.conf.js //webpack测试环境配置
| |--webpack.prod.conf.js //webpack生产环境配置
|--config //项目开发环境配置
| |--index.js //项目基本配置
| |--dev.env.js //开发环境变量
| |--test.env.js //测试环境变量
| |--prod.env.js //生产环境变量
|--src //项目源代码目录
| |--assets //资源目录
| |--components //组件目录
| |--router //路由目录
| |--APP.vue //页面入口文件
| |--main.js //程序入口文件，加载各种公共组件
|--static //静态文件目录，比如：css、图片等静态文件
|--index.html //入口文件
|--test //单元测试文件目录
|--package.json //项目基本信息
|--README.md //项目说明
|
3，新增一个页面
下面以增加一个页面为例，说明开发流程。
3.1，增加页面模板
在src/compoents目录下，新建文件Home.vue作为/home 路由的显示页面。Home.Vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<template>
<div class="home">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'I am Home Page'
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
|
渲染页面模板，主要分为三个部分：
- template。HTMLDom结构，页面显示的内容。
- script。Vue的逻辑代码，前端js。
- style。样式内容，scoped表示仅在本模板生效。
3.2，增加页面路由
在src/router目录下，index.js中新增如下内容。index.js新增
1
2
3
4
5
6
7
8
9
10
11
|
import Home from '@/components/Home'
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home
}
]
})
|
这样 http://localhost:8080/#/home ，就路由到了Home.vue页面了。需要注意的是，这里的路由是从#后面开始的。
4，打包编译
在项目目录下，利用npm，执行build即可完成生产环节的打包编译。
1
2
|
cd myproject
npm run build
|
打包生成的文件输出路径，在config/index.js的assetsRoot、assetsSubDirectory参数中指定
1
2
3
4
5
6
7
8
9
10
11
12
13
|
dist
|-- index.html
`-- static
|-- css
| |-- app.css # 样式
| `-- app.css.map
`-- js
|-- app.js # 主要是vue模板编译后的内容
|-- app.js.map
|-- manifest.js #在vendor的基础上，再抽取出要经常变动的部分，比如关于异步加载js模块部分的内容
|-- manifest.js.map
|-- vendor.js # 通过提取公共模块插件来提取的代码块（webpack本身带的模块化代码部分）
`-- vendor.js.map
|
关于map文件：在开启了控制台（F12）的时候，才会加载.map文件。通常生产环境的js和css代码，经过压缩，一个文件可能只有几行代码，但是每行却有几千字符。这样非常不利于代码调试，map文件就是用来调试代码，定位代码行的。
