项目结构
build
构建工具相关的目录
config
配置目录
dist
通过工具打包生成的最终需要上线的目录
node_modules
存放本地开发所有的依赖包的目录
src
源码目录
static
存放图片等静态资源的目录
.babelrc
babelrc是把新的ES语法，编译成浏览器兼容的语法的编译器，而它需要配置文件.babelrc来配置预设的规范
.editorconfig
定义和维护一致的编码风格。用于语法与编程规范检查
.eslintignore
你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。以下将忽略所有的 JavaScript 文件： **/*.js 当 ESLint 运行时，在确定哪些文件要检测之前，它会在当前工作目录中查找一个 .eslintignore 文件。如果发现了这个文件，当遍历目录时，将会应用这些偏好设置。一次只有一个 .eslintignore 文件会被使用，所以，不是当前工作目录下的 .eslintignore 文件将不会被用到。
.eslintrc.js
eslint用来规范自己的代码风格，减少程序出错的概率
.eslintrc.js就是一种eslint检测规范的配置文件ESLint 支持几种格式的配置文件，如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下： JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。JSON -使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。Deprecated -使用 .eslintrc，可以使 JSON 也可以是 YAML。package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。
.postcssrc.js
PostCSS也是规范代码风格，可以帮助我们提高CSS代码质量。
.postcssrc.js就是检查css代码规范的配置文件index.html
主页
package-lock.json
package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新。类似与yarn.lock
package.json
包管理工具通过package.json管理依赖包，package.json是一个包管理的配置文件
README.md
项目的说明文件
. yarn.lock
类似于package-lock.json
重点了解一下src目录
main.js
// node_modules中引入vue模块。import Vue from 'vue'// 当前目录的app.vue文件import App from './App'// 引入router.jsimport router from './router' // 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip = false // eslint规范，/* eslint-disable no-new */不写就蹦了，为什么？// 因为js中new 一个对象的时候，规范的写法是赋值给某个变量，这里设置eslint-disable，就是为了检测时跳过接下来这行代码/* eslint-disable no-new */new Vue({ el: '#app', router, //根组件的模板 template: ' App.vue
这是一个单文件组件，而且是根组件，是在main.js中渲染的模板和子组件
它和之前的写法不一样，但是道理是一样的，之前的<div id=”app”></div>作为根组件模板是直接写在html中，现在是通过模板的形式渲染到页面
template：
模板中的根元素只能有一个，它会被渲染成组件的根元素，script：
组件的数据，方法，通过export.default导出style：
css部分router.js
路由配置
路由肯定是要导出的
export default new Router({ routes: []}) 开始配置路由:
export default new Router({ routes: [ { path: '/home', name: 'home' // 它的组件是home组件 component: home }, { path: '/about', name: 'about', // 它的组件是about component: about } ]}) 这里用到了Router构造函数，还有各自的组件，所以不要忘了在首行导入 vue 和 vue-router 和组件
// 引入vueimport Vue from 'vue'// 导入路由import Router from 'vue-router'// 导入模板import home from '@/components/home'import about from '@/components/about'
路由会被main.js引入