Vue项目文件含义

目录

一、Vue项目文件

二、node_modules

三、public文件夹

四、src文件夹

五、.gitignore的用法

六、babel.config.js配置文件

 七、jsconfig.json

八、package.json   、package-lock.json

九、README.md：说明性文件

十、vue.config.js

---

一、Vue项目文件

---

二、node_modules

node_modules:安装项目包依赖文件，一般忽略不做修改

---

三、public文件夹

public文件夹:是指公共配置文件，放置静态资源（图片），项目打包会复制一份被webpack打包。

---

四、src文件夹

src前端配置写的文件，页面内容（程序员源代码文件夹）
1. assets文件夹：放置静态资源（多个组件共用的静态资源），在webpack打包时会把静态资 源当成模块打包到JS文件中

2. components：放置非路由组件（全局组件），公共组件

3. App.vue：唯一的根组件

4. main.js：程序入口文件，整个程序中最先执行的文件

---

五、.gitignore的用法

.gitignore长传git仓库忽略文件配置

git+ignore，使在提交代码时忽略列出的相关文件

（在工程中，并不是所有文件都需要保存到版本库中的，例如“target”目录及目录下的文件就可以忽略。在Git工作区的根目录下创建一个特殊的.gitignore文件，然后把要忽略的文件名填进去，Git就会自动忽略这些文件或目录。）

---

六、babel.config.js配置文件

1. Babel 配置把es6转ES5，相当于一个中介，一边是用户，另一边是浏览器。这几年，JavaScript 发生了很大的变化，许多新特性在很多浏览器里都不支持。

 Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器，比如 IE11。

2.  Babel 的工作原理
Babel 使用 AST 把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的JavaScript 代码。

---

 七、jsconfig.json

js文件配置 ，比如路径vscode忽略文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
//解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}

---

八、package.json   、package-lock.json

package.json：记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）,不能锁定后面的小版本。

package-lock.json：  是在 ‘npm install’时候生成一份文件。记录了node_modules目录下所有模块（包）的名称、版本号、下载地址、及这个模块又依赖了哪些依赖。简单来说，就是锁定模块版本号、安装模块需要的依赖版本。

---

九、README.md：说明性文件

说明文档，保留

---

十、vue.config.js

vue.config.js 是项目配置跨域配置，一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。也可以使用 package.json 中的 vue 字段，但是注意这种写法需要严格遵照 JSON 的格式来写。