一、使用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状态文件