Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第7章 Vue.js高级进阶 7.2 vue-cli目录结构

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第7章 Vue.js高级进阶

7.2 vue-cli目录结构

build和config文件夹分别是Webpack配置项目和Vue配置目录，开发时一般不需要注意。

node_modules文件夹，相当于第三方库，通过npm安装的依赖包都会在这个文件夹中。

src文件夹，基本所有的代码操作都在这里面进行。

• assets文件夹：存放静态资源(JS、CSS、images)

  

• components文件夹：存放公共组件

  

• router文件夹：存放路由匹配规则

  

• App.vue：入口组件

  

• main.js：入口JS文件

  

• static文件夹：存放静态文件

  

• .babelrc：用于解析es6代码

  

• .editorconfig：定义代码格式(编辑器用的)

• .postcssrc.js：CSS转换工具，类似less、sass的预处理器

  

• package.json：记录npm install安装模块的版本号、项目地址等

  

• package-lock.json：记录安装模块的版本号和来源(下载地址)

  

assets和static的区别：

• assets目录会被webpack处理，图片变成base64格式
• static不会被webpack处理，直接复制到最终打包的目录
• 建议把JS、CSS放在assets，可以提升页面加载速度。
• 将第三方静态文件放在static下，如一些字体文件，第三方的静态文件一般是被处理过的，无须再让webpack进行压缩处理。
• 大图片建议放到static目录下，小图片放到assets