0. 前言

在我目前的工中很少自己动手搭建一个项目，所以对于开发开始前的项目搭建以及项目各项配置相对理解的不够透彻。这次需要开发一个运行在终端上(类似ATM机的操作)的售楼签约系统。由于 UI 的不适配决定从头开始创建一个新项目。于是在此对项目的创建和配置做一个总结

• 创建 vue 项目可以有多种方式，这里介绍脚手架创建方式

  全局安装vue-cli:

  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  

  创建一个项目:

  // 进到你希望项目放到的那个文件夹目录下，然后运行如下命令
  vue create XXX-XXX  (项目名称)
  

  运行完创建命令后会出现选择预设的选项，我这里选的是manually select features,然后选择了

  Babel、Router、Vuex、CSS Pre-processors、Lint这些插件，并选择在创建单独的文件用于配置这些插件。

  创建vue项目更多详细的内容可以访问 vue 脚手架创建项目

• 项目创建完成后，默认的目录展示如下：
  
  主要分析有以下这些文件，点击文件可快速定位文件的位置

1. .browserslistrc
2. .eslintrc.js
3. gitignore
4. README.md
5. babel.config.js
6. package.json
7. vue.config.js
8. env配置环境变量文件
9. .prettierrc

1. 结构分析

具体的src和public文件夹等，这里不做过多的介绍，主要介绍根目录下的相关配置文件的内容

① .browserslistrc

该文件的作用是根据提供的目标浏览器的环境，来智能添加 css 前缀，js 的 polyfill 垫片,来兼容旧版本浏览器。避免不必要的兼容代码，以提高代码的编译质量。

默认创建的项目中，.browserslistrc文件内容如下：

> 1%
last 2 versions
not dead

分别代表1.全球超过 1%人使用的浏览器；2.所有浏览器兼容到最后两个版本，再以前的就不兼容；3.不兼容已经在市面下架“死去”的浏览器。以下是更多相关的配置和介绍：

② .eslintrc.js

这个文件主要用于配置项目的 eslint 校验，对于一个团队来说，每个人有每个人写代码的风格和习惯，有人喜欢结尾加分号，有人不加，有人习惯使用双引号，有人习惯单引号，当然这些不足以影响项目的运行，但是 eslint 还可以配置更加重要的规范，来统一代码风格和预防一些代码隐患。所以这个文件相对团队开发来说是比较重要的。

.eslintrc.js文件默认导出一个对象，以下是创建 vue 项目后 eslintrc 文件的默认内容，结尾处会提供一个更详细的 eslint 配置文件。

module.exports = {
  // 默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  root: true,
  // env表示一个环境，预定义了一组全局变量
  env: {
    node: true // 定义了Node.js 全局变量和 Node.js 作用域。
  },
  // extends 一个配置文件可以被基础配置中的已启用的规则继承，如下设置继承了数组中的三项规则。其中值为 "eslint:recommended" 的 extends 属性会启用一系列eslint核心规则。
  extends: ['plugin:vue/essential', 'eslint:recommended', '@vue/prettier'],
  // ESLint 允许你指定你想要支持的 JavaScript 语言选项。默认情况下，ESLint 支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。
  parserOptions: {
    parser: 'babel-eslint'
  },
  // rules 表示eslint校验规则
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

rules 配置规则格式

规则格式是<规则名称>: <告警级别>，告警级别分为三种:

• “0"表示忽略问题，等同于"off”;
• “1"表示给出警告，等同于"warn”;
• “2"表示直接报错，等同于"error”。

更多的 ESLint 配置可以前往 ESLint 中文网 查看

③ gitignore

该文件正如其名字的意思，告知 git 那些文件或文件夹不需要添加到版本管理中。内容如下：

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

④ README.md

这个文件就是项目的介绍文件，使用 markdown 语法。

不清楚markdown语法的可以访问markdown基本语法

⑤ babel.config.js

Babel 是一个 JavaScript 编译器，可以对 JavaScript 文件进行转码，类似的有 ES6 转为 ES5 兼容不同的浏览器。

babel.config.js是 babel 的配置文件，presets字段设定转码规则，此处 @vue/cli-plugin-babel/preset就是规则。

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset']
}

了解更多的Babel相关配置可以访问Babel 配置文件

⑥ package.json

package.json文件提供了很多项目相关的信息，主要有这个项目所需要的各种模块；以及项目的配置信息（比如名称、版本、许可证等元数据）；还可以配置一些简化script执行脚本。项目中json文件是不能添加注释的，需要删除相关注释噢

{
  "name": "vue-project", // 项目的名称
  "version": "0.1.0", // 项目的版本号  大版本号.小版本号.修订版本号[.日期版本号]
  "private": true, // 是否对外开发，private为true表示不对外开放
  "scripts": {
    // script配置脚本对象，表示npm run XXX
    "serve": "vue-cli-service serve", // 配置serve脚本，表示npm run serve 等同于 vue-cli-service serve 命令
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    // 依赖的相关信息，这里主要是生产和开发依赖,一般用npm install XXX --save 安装的依赖就会添加到这里
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    // 开发依赖的相关信息，这里的主要是开发过程的依赖，生产环境中不会存在,一般用 npm install XXX --save-dev 安装的依赖会添加到这里
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "lint-staged": "^9.5.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

2. 额外的文件

除了上述vue-cli创建项目后默认生成的文件外，我们在开发过程中还需要很多配置文件，且都是在根目录中自己创建的。下面介绍几个相关文件

① vue.config.js

这个文件表示 vue 的配置文件，像一些简单的前端服务运行的端口号，是否自动打开，代理地址等。下面是一些简单的配置

const path = require('path') // 导入Node的path模块

// 解析函数，在配置引入别名时用到
function resolve(dir) {
  return path.join(__dirname, dir)
}

// vue.config.js的主体配置
module.exports = {
  publicPath: '/', // 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致。
  outputDir: 'dist', // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
  assetsDir: 'assets', // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  css: {
    // 对css的一些配置
    extract: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
    sourceMap: false // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能。
  },
  lintOnSave: process.env.NODE_ENV === 'development', // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。
  devServer: {
    // 服务相关的设置
    host: '127.0.0.1', // 指定一个主机名
    port: 8000, // 指定一个端口号
    open: true, // 运行成功后是否自动打开页面
    proxy: {
      // 代理相关。如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器
      '/api': {
        // 对请求接口中出现的api进行代理
        target: process.env.VUE_APP_PROXY_URL, // 代理的目标地址，这个取值在后面的文件会讲到
        changeOrigin: true, // 是否改变域名，
        ws: false, // 是否开启webSocket
        pathRewrite: {
          // 路径重写，如果默认不重写路径，那么`/api/users`会被代理到`target路径/api/users`
          '^/api': '' // 对api进行路径重写，重写后，那么`/api/users`会被代理到`target路径/users`
        }
      }
    }
  },
  // webpack相关的配置，可以设置plugins和别名解析等
  configureWebpack: {
    // 解析设置
    resolve: {
      // 别名配置，用来创建 import 或 require 的别名，来确保模块引入变得更简单。
      alias: {
        // 用'@'表示src的路径， @/views/Home.vue 等同于 src/views/Home.vue.
        '@': resolve('src'),
        // 同理，用@components 表示 src/components目录
        '@components': resolve('src/components'),
        '@assets': resolve('src/assets')
      }
    },
    // 配置webpack的plugins
    plugins: []
  },
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false
}

更多vue的配置可以访问 vue 配置参考

② .env.development、.env.production 配置文件

这里可以自己创建以上配置文件，用于配置不同环境下的环境变量，其中

• .env.development表示开发环境的环境变量
• .env.production表示生产环境的环境变量
• .env.mock表示 mock 运行状态下的环境变量

这些环境变量可以在全局使用，使用方法就是process.env.XXXX。其中 xxxx 表示变量名

由于上面在vue.config.js配置文件中proxy代理配置的属性target的值使用了process.env.VUE_APP_PROXY_URL变量。所以我在env.development文件里定义如下变量：

VUE_APP_PROXY_ROOT = 'http://192.168.2.25:6060/'

于是在开发过程中，向 /api/user 地址发送请求就等同于向 http://192.168.2.25:6060/user 地址发送请求

③ .prettierrc文件

• Prettier是一个代码格式化工具，可以在开发过程中，使代码格式化成你想要的风格和规范。

开发前端的过程中，我们要求开发人员都在VSCode中装入Prettier插件，方便格式化。与 ESLint 一样，为了统一代码风格和规范，所以 Prettier 也是在团队开发中重要的一员。

• .prettierrc文件就是配置使用 Prettier 格式化代码的方式（注意该文件中的注释需要删除后才会生效）

{  "eslintIntegration": true, // eslint集成  "stylelintIntegration": true, // 样式嵌入  "singleQuote": true, // 是否使用单引号  "semi": false, // 结尾是否保留分号，设置为false表示结尾不会有分号  "trailingComma": "none", // 对象、数组等，最后一个是否保留逗号，设置为none表示不保留逗号， es5表示保留es5的结尾逗号  "arrowParens": "avoid", // 箭头函数中只有一个参数是否保留括号，aviod表示不保留括号，always表示保留括号  "bracketSpacing": true, // 对象中的空格 默认true  "useTabs": false, // 使用tab缩进，默认false  "tabWidth": 2 // tab缩进大小，2个空格}

更多prettier的配置内容请访问Prettier 配置

3. 更多的项目内容可以查看以下 github 地址

https://github.com/He-Huang/vue-project-structure

参考地址：

1. vue 脚手架创建项目
2. ESLint 配置文件 .eslintrc 示例及说明
3. ESLint 中文网
4. markdown基本语法
5. Babel 配置文件
6. vue 配置参考
7. Prettier 配置

文件关系详解

1. 各个文件之间，本身是没有关系的，因为相互引入，所以产生了关系
   • 首先是各个文件之间代表了什么，可以参考vue结构详解，这里不做过多赘述
   • src 做为整个项目的内容主体，担任了直面客户的主要角色
   • static 做为整个静态资源库，里面放的东西比如：css、img、ttf字体等
   • tests vue的单元测试项，可删除，感兴趣的可以自行搜索vue 单元测试进行学习
   • public/index.html 文件的主体内容项，浏览器显示的页面都属于html页面，所以index.html相当于为我们现在做的项目套一个壳
   • dist 是最后的产品，整个项目通过npm run build形成的最后打包文件
   • 其他文件都是属于配置文件，辅助开发
     • package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息，在node环境下必备文件。比如：项目名称、项目版本、项目执行入口文件、项目贡献者等等。npm init在我们初始化生成项目的时候，主要生成的就是这个文件，也是你下载依赖npm install的根文件

package name: 你的项目名字叫啥
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件（一般你要用那个js文件作为node服务，就填写那个文件）
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
author: 作者的名字（也就是你叫啥名字）
license: 发行项目需要的证书（这里也就自己玩玩，就不写了）

package.json记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）
package-lock.json记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息

如果没有package-lock.json，当你使用npm i 某个依赖的时候如果加上版本，那他会下载这个依赖的最新版本。
所以，package-lock.json就是当前项目依赖的版本控制器
package.json和package-lock.json保证了大家在协同开发的时候所用的依赖模块版本是一致的
当你的项目新增了一个依赖模块请一定要把package.json和package-lock.json一起上传,这样别人下载项目的时候去更新模块信息，就能得到和你一模一样的模块版本

2. node_moudles 作为整个项目的依赖包，当我们引入某个UI库或者组件时，通过下载后，可在你说在的文件中引用组件
   

webpack配置（vue.config.js或build）

vue.config.js 配置(vue自主构建)

vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件，需要手动创建

vue.config.js配置选项：

1. publicPath
   Type: string
   Default: ‘/’
   部署应用包时的基本 URL， 用法和 webpack 本身的 output.publicPath 一致。 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
   （注：vue-router的base配置和vue.config.js配置文件的publicPath配置保持一致）
   （如果只配置了vue-router的base配置，最后会发现，找不到，因为打包的时候，在dist文件内部没有app文件夹，所以找不到，如果，加了一个dist/app就可以正常访问了）
   
   （如果只设置vue.config.js的publicPath配置，最后会发现，在包下面还有一个app文件）
   
   如果nginx，一般nginx都会配置一个静态资源目录，打包后的文件都会放到这个静态资源目录里面，nginx去做映射，所以publicPath这个属性基本不用改。’/'就行
2. outputDir
   
3. assetsDir
   
4. indexPath
   
5. filenameHashing
   
6. pages
   
7. lintOnSave
   
8. runtimeCompiler
   
9. transpileDependencies
   
10. productionSourceMap
    
11. crossorigin
    
12. integrity
    

Vue项目结构详解传送门： https://blog.51cto.com/u_4547985/2390789

废话少说：上图