vue-cli4 目录结构介绍 vue-cli4

【vue-cli4 目录结构介绍】一、使用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文件。图片的引用方式只能通过：文章图片方式引用。
src/compnents 存放公共组件
src/views 存放页面级页面
src/App.vue 主vue组件引入其他组件，App.vue是项目的主组件。
src/main.js 入口文件，初始化vue实例，也可以在此引用组件库或者全局变量
src/router.js 路由文件，各个页面的路由
src/store.js 状态文件