vue-cli脚手架初始化项目各个文件夹用途

node_modules：项目依赖文件夹

public：一般放置一些静态资源（图片）。需要注意，放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动的打包到dist文件夹中。

src（程序员源代码文件夹 ）：

• assets：一般用于存放静态资源（放置多个组件共用的静态资源），需要注意，放在assets文件夹里的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包到JS文件里面。
• components：一般放置非路由组件（全局组件）
• App.vue：唯一的根组件（汇总所有组件）
• main.js：入口文件，也是整个程序当中最先执行的文件

.gitignore：git版本管制忽略的配置（一般不碰）

babel.config.js：babel的配置文件（相当于翻译官，比如把ES6相关语法翻译为ES5，兼容性更好，一般不碰）

package.json：应用包配置文件（类似于项目身份证，记录着项目名称、项目依赖、项目运行等信息）

package-lock.json：包版本控制文件（缓存性文件）

README.md：应用描述文件（说明性文件）

vue.config.js：可以对脚手架进行个性化定制，如何配置可以参考Vue CLI

其他文件夹：

pages：存放路由相关组件（pages也可换成views）

router：路由配置文件

store：vuex相关文件

mock：存放mock模拟数据

初始化vue项目的其他配置

1.浏览器自动打开

在package.json文件中，在serve属性后面追加--open --host=localhost

"scripts": {
 "serve": "vue-cli-service serve --open --host=localhost",
 "build": "vue-cli-service build",
 "lint": "vue-cli-service lint"
},

2.关闭eslint校验工具

创建vue.config.js文件：需要对外暴露

module.exports = {
   lintOnSave:false,
}

3. src文件夹的别名的设置

注意：最新vue脚手架版本默认已经配置好了
因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些

创建jsconfig.json文件 

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "dist"
    ]
}

补充：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

到此这篇关于vue-cli脚手架初始化项目各个文件夹用途的文章就介绍到这了,更多相关vue-cli脚手架初始化项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！