cli搭建的vue项目各个文件夹的作用 (vscode)

vue项目各个文件夹的作用

一.这个就是我们界面里面的文件

1.node_modules

• 用来存放包管理工具下载的包的文件夹，复杂的模块依赖关系需要被记录，确保模块的版本和当前保持一致，否则会导致当前项目运行报错
• 文件夹以及文件过多过碎，当我们将项目拷贝给别人的时候，传输速度会很慢，所以传输项目一般不传输node_modules文件夹，可以根据package.json文件记录的信息通过执行npm install 下载当前依赖的第三方模块，生成node_modules文件夹

2.public

存放的是最后编译项目时候的页面模板 里面包含一个index.html文件，因为这里是单页面开发，所以一个就够了; 当然里面的代码可以修改，比如你是移动端开发可以在里面配置rem，公共资源等等

3.src

src文件夹包含整个项目中所有需要包含的代码（脚手架生成的webpack配置项，只对src目录进行编译处理，其他目录是不处理的）

api 在开发项目时一般都是在src下创建一个文件夹api在里面对axios进行二次封装，组件化创建文件对应的页面在对应的文件下发请求，方便管理

• assets
  src 下的assets是放静态资源的比如：css文件，图片文件

• components 主要存放组件文件，比如自定义的一些组件文件

• plugins 主要放配置文件，常用的放element.js

• router 里面包含index.js文件，起配置路由规则及挂载的作用

• views 项目自带的页面级组件

• App.vue 当前页面的主要入口

• main.js 项目入口（单页面一个入口，多页面多个入口)

4.browserslistrc

支持的浏览器的最低版本

> 1% // 使用的浏览器市场占有率大于1%
last 2 versions  //最近的两个版本
not dead

5.editorconfig

主要是一些规格化的配置

[*.{js,jsx,ts,tsx,vue}]
indent_style = space  //缩进样式保留空格
indent_size = 2 // 换行的前面补全2个空格
trim_trailing_whitespace = true  // 删除尾随空格
insert_final_newline = true  // 最后一行要换行

6.eslintrc.js

最头痛文件里面的规则：自己手动更改了一些规则，避免报错

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 0,
    'no-trailing-spaces': 0,
    'object-curly-spacing': 0,
    'no-multi-spaces': 0,
    'spaced-comment': 0,
    'indent': 0,
    'keyword-spacing': 0
  }

7.gitignore

一些不需要上传到码云或者GitHub的文件放在这里：比如

.DS_Store 
node_modules  
/dist  //打包文件

8. babel.config.js

相当于一个转译器文件，比如浏览器不支持ES6 的语法，babel.config.js就可以把ES6的语法转译为ES5,浏览器就可以 ‘识别’。

9. package-lock.json

• 锁定包的版本，确保不会因为包的版本不同产生问题
• 加快下载速度，因为该文件已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作

10. package.json

• 项目描述文件，记录了当前项目信息，例如项目名称，版本，作者，GitHub地址，当前项目依赖了那些第三方模块
• 可以使用npm init -y 生成package.json

11. README.md

一些基本npm指令

npm install
npm run serve
npm run build
npm run lint