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