常见Vue工程的目录结构
|--config/ #Vue基本配置文件，可以设置监听端口，打包输出等
|--node_modules/ # 依赖包
|--public
|--favicon.ico #标签图标
|--index.html #当前项目的唯一页面
|--src
|--assets #静态资源img,css,js
|--api #
|--components #小组件
|--store
|--index.js #根状态管理集
|--modules #模块化状态管理
|--actions #进行异步操作，提交mutation方法
|--getters #加工state中的成员变量并传至外界
|--mutation-types.js #项目存放mutations方法常量的文件，按需加入
|--mutations #操作state数据的方法集合，比如对数据的增删改等等
|--index.js
|--views
|--xxx.vue
|--router
|--index.js #路由脚本文件，配置路由url与页面组建的映射关系
|--App.vue #根组件
|--main.js #入口文件
|--package.json #项目的配置信息，启动方式等
Vue的运行流程
index.html-->main.js-->App.vue-->router/index.js
index.html ---项目入口
index.html的内容比较简单，主要是提供一个div给vue挂载。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui, viewport-fit=cover" />//适应手机屏幕
<title>首页title</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js---入口文件
main.js主要是引入vue、App、router模块，创建一个vue对象，并把App.vue模版的内容挂载到index.html的id为app的div标签下，并绑定一个路由配置。
import Vue from 'vue' /*引入vue框架*/
import App from './App' /*引入根组件*/
import router from './router' /*引入路由设置*/
import store from './store' /*引入根状态管理集文件*/
Vue.config.productionTip = false /*关闭生产模式下给出的提示*/
//定义根组件，用render读取一个.vue文件，$mount渲染替换index.html中的占位
new Vue({
el:'#app',
router,
store,
render:h=>h(App),
}).$mount('#app');
App.vue ---根组件
我们在Vue中经常要建立后缀名为.vue的文件，.vue文件通常由<template></template>,<script></script>和<style></style>三部分组成。
其中template></template>通常建立我们要用的网页界面，<script></script>则是跟数据打交道，面向逻辑，而<style></style>主要是负责template></template>标签中的样式。
上面三者的结合，就构成了我们所见到的网页，一般我们在开发新页面的时需要创建一个新的.vue文件，在文件中完成三个环节的编写。
上面main.js将App.vue模版的内容放置在index.html的div标签内，由下图可见，App.vue中有一个待放置内容的<router-view/>，<router-view/>的内容将由router配置决定。
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
.add-container {
margin-bottom: 20px;
}
</style>
在书写.vue文件中，需要注意以下几点：
-
template(模版)中只能包含一个父节点，即顶层的div只能有一个（例如上图，父节点为#app的div,没有其他兄弟节点）。
<router-view></router-view>是子路由视图，后面的路由页面都显示在此处。 -
对于script标签，vue通常用es6来写，然后用export default导出，内部可以包含数据data、生命周期(mounted等)，方法(methods)等。
-
样式是通过style标签
<style></style>包裹，默认作用域是全局的，如需定义作用域在该组件下起作用，需在标签上加上scoped(<style scoped></style>)。
router.js---路由配置
在router文件夹下，有一个index.js文件，即为路由配置文件。由下图见,文件中配置了一个路由，在访问路径/的时候，会把Home模版的内容放置到上面的router-view中。
import Vue from 'vue';
import Router from 'vue-router';
import Home from 'views/home'
import About from 'views/about'
Vue.use(Router);
export default new Router({
base:'/'
routes:[
{
path:'/',
name:'home',
component:Home
},
{
path:'/about'
name:'about',
component:About
}
]
});
用户在浏览器中访问的路由是/，router插件就会加载home.vue文件，同理/about就是加载about.vue文件。用加载的home.vue文件或者about.vue文件去替换App.vue文件中的<router-view/>占位符。
###home.vue
<!--
1)一个.vue文件就是一个组件
2）组件都是由三部分组成：html结构、js逻辑、css样式
html结构都是在template标签中，页面结构有且只有一个根标签（te mplate一级结构下）
js逻辑都是在script标签中，必须设置导出，export default
css样式都是在style标签中，必须设置scoped属性，是样式组件化。
-->
<template>
<div class= "home">
<h1>Home</h1>
</div>
</template>
<script>
//.vue文件类似于模块，可以直接相互导入，所以在组件内部要设置导出
export defalt {
}
</script>
<style scoped>
.home {
}
</style>
