目录结构

- 项目
  - public
  - src
    - assets 
    - components 组件都需要写在这里
    - App.vue 我们对应new Vue 对应的模板文件
    - main.js 入口文件
  - babel.config.js
  - package.json

项目中的.vue

vue-loader一个文件类型，webpack会把vue文件作为一个模块。

在vue中有三个结构

• template html
• script js
• style css

我们可以通过 sc 直接生成结构，需要安装对应的插件Vue VS Code Extension Pack （vetur）

当我们把{}作为模块导出时，template会变成{}中的template选项

<template>
  <div>组件模板</div>
</template>

<script>
export default {

}
</script>

<style>
  div {
    width: 100px;
  }
</style>

如何创建组件

src/components中新建一个.vue文件

输入sc生成模板

在template中写模板

child.vue

<template>
  <div>子组件</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

在父组件中使用
parent.vue

<template>
  <div>
    父组件
    <child></child>
  </div>
</template>
<script>
// 引入的child就是一个组件对象
import child from './child' // .vue可以省略

export default {
  components: {
    // 局部注册组件
    child
  }
}
</script> 

首先搭建静态页面结构

src下的目录文件：

1. api 后台数据接口交互文件夹
2. common 通用资源文件夹，如 image，style，fonts
3. components 非路由组件文件夹
4. filter 自定义过滤器文件夹
5. mock 模拟数据接口文件夹
6. router 路由文件夹
7. store vuex相关文件夹
8. vues 路由组件文件夹
9. App.vue 应用组件
10. main.js 入口 JS
11. pages 放一级 二级路由组件

但是 cli3 中 其中的路由 单独在外面 可以不用建 6