vue框架源码与进阶,vue框架

0 .前言我目前的工作中很少自己构建项目，所以在开发之前对项目的构建和项目的各个布局都不是很了解。 这次需要开发在终端上工作(类似自动取款机的操作)的售楼合同系统。 由于UI不兼容，我们决定从头开始创建新项目。 这里总结了项目的创建和配置

创建vue项目有多种方法，但本节介绍如何创建脚手架

vue-cli:全球安装

NPM install-g @ vue/CLI # oryarnglobaladd @ vue/CLI创建项目：

//进入要放置项目的文件夹下，运行以下命令vue create XXX-XXX (项目名称)并运行创建命令，显示用于选择预设的选项： 在此选择并选择了“手动选择特征”

创建名为Bel、Router、Vuex、CSS预处理程序和Lint的插件，然后选择创建其他文件来配置这些插件。

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

项目创建完成后，默认目录显示如下：

主要分析包括以下文件，单击文件可以快速找到文件的位置

3358 www.Sina.com/http://www.Sina.com/http://www.Sina.com/3358 www.Sina.com.Sina.com 1 .结构分析的具体src和公共文件夹等，这里很少介绍，主要介绍根目录下相关配置文件的内容

.browserslistrc此文件的作用是根据提供的目标浏览器环境智能添加css前缀、js的polyfill焊盘，使其与早期版本的浏览器兼容。 为了提高代码的编译质量，避免不必要的兼容代码。

在缺省情况下创建的项目中， browserslistrc文件的内容如下：

1%last 2 versionsnot dead分别表示1 .全球1%以上的人使用的浏览器2 .所有浏览器兼容到最后两个版本，之前的不兼容3 .已经上市的“死”浏览器以下是相关的配置和说明。

示例1%全球1%以上的人使用的浏览器5% in US指定国家的使用率与last 2版本的所有浏览器兼容， 使用CanIUse.com跟踪到最后两个版本的FirefoxESRFirefox20指定浏览器的版本范围not ie=12.1指定浏览器的指定版本unreleased versions，从8个方向排除某些版本Firefox 的测试版unreleased Chrome versions指定浏览器的所有测试版本since 20132013年或更高版本发布的文件 .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希望支持您可以复盖此设置以启用ECMAScript的其他版本和JSX支持。 parser options : { 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_Storenode_modules/dist# local env files.env.local.env.*.local# Log filesnpm-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

参考地址： vue 脚手架创建项目ESLint 配置文件 .eslintrc 示例及说明ESLint 中文网markdown基本语法Babel 配置文件vue 配置参考Prettier 配置