Vue工程化项目
脚手架安装与项目创建
- 安装
cnpm i -g @vue/cli
- 创建项目
vue create 项目名称
创建项目过程的选项
（1）自定义安装
（2）选择安装的模块（按空格选中，按回车下一步），然后选择version,Babel,Router,Vuex
（3）选择Vue版本，选择2.x（2.x是稳定版）
（4）选择路由模式是否为history，选择Y
（5）当前配置项的格式，选择package.json
（6）是否将整个安装流程保存为安装模板（下一次再创建项目就不需要这些流程了），建议选择N，因为根据项目需求不同，每次选择的内容也有所差别。
项目目录
- node_modules
依赖管理目录 - public
本地服务器的根目录，用于存放静态文件，例如HTML，CSS等。 - src（源码）
|-- assets 存放图片，静态资源文件
|-- components 公共组件
|-- router 路由，用于跳转
|-- store 全局静态管理
|-- views 视图组件
|-- App.vue 根组件
|-- main.js 入口文件，用于引入全局依赖或全局配置 - package.json npm的配置文件
.vue文件里面有三部分（template，script，style），如下：
<template>
这写所有的HTML内容，但是里面只能有一个根节点，就是只能有一个跟div，在这个根div里面可以随便写内容。
<div>
{
{
msg }}
</div>
</template>
<script>
export default {
这里面写vue选项等内容。
没有el选项，因为template里面就只有一个根节点，管理的就是那一个节点。
data的写法和之前不同，是一个函数，然后返回一个对象。
data(){
return {
msg: 'hello'
}
},
methods : {
}
</script>
<style scoped>
这里写所有的CSS样式。
scoped，只对当前组件的样式有效，不会影响别的组件的同名元素的样式。
当不加scoped的时候，只有当当前组件加载过一次之后，才会影响别的组件的样式。否则，不会影响别的组件的样式。
</style>