一、应用 vue-cli4 脚手架初始化我的项目后，目录构造如下:
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
├── src
│ ├── App.vue
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.js
│ ├── router
│ │ └── index.js
│ ├── store
│ │ └── index.js
│ └── views
│ ├── About.vue
│ ├── Home.vue
│ └── video
│ └── clip
│ ├── class
│ │ └── list.js
│ ├── clip.vue
│ └── data.json
├── vue.confog.js
└── yarn.lock
二、目录介绍
README.md我的项目介绍node_modules相干依赖package.json项目名称，所须要模块、版本、运行命令public寄存动态目录。public上面的文件会一成不变的增加到dist中，不会被合并、压缩；不会被webpack打包工具所解决，多用来寄存第三方插件。相似于vue2中的static目录。所以想要援用，必须应用绝对路径.public/index.html模板文件，生成我的项目的入口文件，打包后的 js、css 主动注入到该页面src寄存各种 vue 文件的中央src/assets用于寄存各种动态文件，如图片，css。编译之后，assets 目录中的文件，会被合并到一个文件中，而后进行压缩。多用来寄存业务级的 js、css 等，如一些全局的 scss 款式文件、全局的工具类 js 文件。图片的援用形式只能通过：<img class="logo" src="@/assets/logo.png" alt="" />形式援用。src/compnents寄存公共组件src/views寄存页面级页面src/App.vue主 vue 组件 引入其余组件，App.vue 是我的项目的主组件。src/main.js入口文件，初始化 vue 实例，也能够在此援用组件库或者全局变量src/router.js路由文件，各个页面的路由src/store.js状态文件