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文件。图片的引用方式只能通过：<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 状态文件