我在项目中是这样配置 Vue 的

栏目: IT技术 · 发布时间: 4年前

内容简介:独在公司加夜班,行行代码心甚寒。不知功能何时完,杀了产品来祭天。公司前端项目比较多,每个团队都会自己搭建一套属于自己团队的项目框架,导致公司项目五花八门,跨团队协作难上加载,所以小编整理了一个开箱即用的框架,用于统一所有的团队,那这个框架是怎么配置的呢,我们一起来看看。
我在项目中是这样配置 Vue 的

独在公司加夜班,行行代码心甚寒。

不知功能何时完,杀了产品来祭天。

公司前端项目比较多,每个团队都会自己搭建一套属于自己团队的项目框架,导致公司项目五花八门,跨团队协作难上加载,所以小编整理了一个开箱即用的框架,用于统一所有的团队,那这个框架是怎么配置的呢,我们一起来看看。

本文内容来源于小编开源的一个基于 vant 封装的开箱即用框架的一部分,本文中提取了部分功能,完整代码,请查看 https://github.com/snowzijun/vue-vant-base

启用压缩,让页面加载更快

在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对待吗进行混淆压缩,只为了让 js , css 文件变得更小,加载更快。但只是这样做是不够的,我们还可以做得更极致。

gzipWeb 世界中使用的最为广泛的文件压缩算法,当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法,所以如果我们在打包 Vue 项目的时候,可以直接将所有的静态资源压缩为 gzip ,就可以极大的减少静态资源的大小,提升浏览器加载速度,那 Vue 项目如何配置呢?

添加vue.config.js 文件

在新建 Vue 项目中,默认是没有 vue.config.js 文件的,首先你需要在项目根目录新建一个vue.config.js文件,然后在文件中加入以下代码

module.exports = {
}

本文后面会多次使用到 vue.config.js 文件,在后面将不再赘述。

配置compression-webpack-plugin

  • 安装 compression-webpack-plugin
yarn add compression-webpack-plugin -D
  • 配置

修改 vue.config.js 文件为以下代码

const CompressionWebpackPlugin = require('compression-webpack-plugin')
  const isProd = process.env.NODE_ENV === 'production'
  module.exports = {
    configureWebpack: config => {
      if (isProd) {
        // 配置webpack 压缩
        config.plugins.push(
          new CompressionWebpackPlugin({
            test: /\.js$|\.html$|\.css$/,
            // 超过4kb压缩
            threshold: 4096
          })
        )
      }
    }
  }
  • 查看压缩效果

在配置上面的压缩之后,执行 yarn build 命令,会发现生成的静态文件里面新增了后缀为 gz 的文件

我在项目中是这样配置 Vue 的

如果此时将项目部署到已开启了 gzip 的服务器如 nginx 里面之后,访问浏览器即可看到浏览器下载的是已压缩的文件

我在项目中是这样配置 Vue 的

移动端适配

当前移动端比较流行的两种适配方式, 一种是将 px 转换为 rem ,另一种是将 px 转换为 vw ,在开发项目时,我一般喜欢将 px 转换为 vw ,那么如何配置呢

安装 postcss-px-to-viewport

首先,你需要给项目安装 postcss-px-to-viewport 插件

yarn add postcss-px-to-viewport -D

配置移动端适配

在项目根目录下面新建文件 postcss.config.js ,然后将以下代码加入到文件内

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      // 视窗的宽度,对应的是我们设计稿的宽度,我们公司用的是375
      viewportWidth: 375,
      // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
      // viewportHeight: 1334,
      // 指定`px`转换为视窗单位值的小数位数
      unitPrecision: 3,
      // 指定需要转换成的视窗单位,建议使用vw
      viewportUnit: 'vw',
      // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
      selectorBlackList: ['.ignore'],
      // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
      minPixelValue: 1,
      // 允许在媒体查询中转换`px`
      mediaQuery: false
    }
  }
}

配置完之后,重启服务,在浏览器中审查元素,可以看到原来写的 px 都转换成了 vw

我在项目中是这样配置 Vue 的

忽略目录,让moment变得更小

使用过 moment 的同学一定知道, momentlocale 语言包特别大,但是我们一般的项目只在国内用,也用不到那么多语言,是不是可以去掉呢?这时候你需要使用到 webpack.IgnorePlugin

vue.config.js 文件,你需要添加以下代码

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
    // 优化moment 去掉国际化内容
    config
    .plugin('ignore')
    // 忽略/moment/locale下的所有文件
    .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) 
  }
}

我们虽然按照上面的方法忽略了包含’./locale/’该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了,这时候如果想用某一种语言应该怎么办呢?

import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
// 指定使用的语言
moment.locale('zh-cn');

当然小编更建议在项目中使用更轻量级的 day.js 代替 moment

生产环境删除console.log

开发环境为了调试,会添加大量的 console.log ,但如果 console.log 提交到生产环境里面,不仅仅会影响到代码执行性能,而且可能会泄露一些核心数据,所以我们更希望的是在生产环境,将所有的 console.log 清除掉,怎么做呢?

安装插件

需要安装 babel-plugin-transform-remove-console 插件

yarn add babel-plugin-transform-remove-console -D

配置babel.config.js

打开 babel.config.js 文件,然后在文件内添加

// 所有生产环境
const prodPlugin = []
if (process.env.NODE_ENV === 'production') {

// 如果是生产环境,则自动清理掉打印的日志,但保留error 与 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}
module.exports = {
   plugins: [
     ...prodPlugin
   ]
}

开启eslint,stylelint

看到这一条,有些同学就有点受不了想退出了,配置这个不是自己给自己找不自在吗?在团队开发中,配置这些还是很有用的,制约团队中的每个人都按照标准来开发功能,这样至少大家写的代码不至于相互看不懂(我深受不规范代码的折磨啊)。

安装依赖

在配置这些 lint 之前,你需要安装这些插件

  • @vue/cli-plugin-eslint
  • @vue/eslint-config-prettier
  • babel-eslint
  • eslint
  • eslint-plugin-babel
  • eslint-plugin-prettier
  • eslint-plugin-vue
  • husky
  • lint-staged
  • prettier
  • stylelint
  • stylelint-config-recess-order
  • stylelint-config-standard
  • stylelint-prettier
  • stylelint-scss

同时还需要给 vscode 以下插件

eslint

配置vscode

vscodesetting 文件里面添加以下代码

"eslint.enable":true,
"eslint.options": {
  "extensions":[
    ".js",
    ".vue",
    ".ts",
    ".tsx"
  ]
 },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "css.validate": true,
  "scss.validate": true,
  "less.validate": true,
  "editor.codeActionsOnSave": {
     "source.fixAll": true
  },

配置eslint

首先在项目根目录下面添加 .eslintrc.js.eslintignore 文件

.eslintrc.js 文件内添加以下内容

// 缩略版
module.exports = {
  root: true,
  globals: {
    process: true
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
  plugins: ['babel', 'prettier'],
  rules:{ 
    // 校验规则此处略
	}
}

.eslintignore 文件中添加以下代码

.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

配置完之后,在 package.jsonscript 里面添加

"eslint": "vue-cli-service lint"

然后执行 yarn eslint 就可以对代码进行格式化,当然 vscode 也会在你保存文件的时候校验一次

配置stylelint

限制 jsvue 是不够的,还需要限制以下 style ,感觉这是自己给自己无限挖坑的举措,但是这东西越用越爽,一起来看看

首先在项目根目录下面新建 .stylelintrc.js.stylelintignore 文件

.stylelintrc.js 文件中添加以下内容

module.exports = {
  extends: ["stylelint-config-standard","stylelint-config-recess-order"],
  "plugins": [
    "stylelint-scss"
  ],
  rules: {
    // 校验规则略
  }
}

.stylelintignore 文件内容与 .eslintignore 文件内容一致

配置完之后,在 package.jsonscript 里面添加

"stylelint": "stylelint src/**/*.{html,vue,css,sass,scss} --fix",

然后执行 yarn stylelint 就可以对样式进行格式化,当然 vscode 也会在你保存文件的时候校验一次

配置husky

eslint , stylelint 配置完之后,写代码时候 vscode 会自动校验格式化代码, 但就怕有人用其他编辑器没有配置插件,将未校验的代码提交到仓库里面,导致所有人的代码都爆红,这时候就需要使用 husky 在提交代码时候进行校验。

git 提交代码时候,会触发一系列 hook 钩子函数,而 husky 就是一个 Git hooks 工具。 lint-staged 是一个在git暂存文件上运行linters的工具,为什么要用这个 工具 呢,因为我们在提交代码的时候,只需要对已经修改过的文件进行校验,不然检查所有文件,比较浪费时间。那我们改怎么配置呢?

你只需要在 package.json 文件里面添加以下代码

"husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add -A"
    ],
    "*.{html,vue,css,sass,scss}": [
      "yarn stylelint"
    ]
  }

这时候你如果执行 git commit -m '提交描述' 的时候,会发现提交之前会调用 eslintstylelint 进行代码校验,校验失败无法提交

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高


以上所述就是小编给大家介绍的《我在项目中是这样配置 Vue 的》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

SNS浪潮

SNS浪潮

李翔昊 / 人民邮电出版社 / 2010 / 35.00元

内容提要: 本书通过互联网行业与社会生活中的案例内容,向读者介绍了一些互联网技术和新型网站的发展,揭示了社交网站兴起的因素。在探讨社交网站发展和网络开放平台的同时,也介绍、描述了其对社会信息传播、行业组织、广告营销等方面的影响。最后通过新技术和产品应用,展望了未来社会化网络的趋势走向。 本书适合从事信息技术、社会传播、市场营销相关工作,以及广大互联网用户,或对IT行业有兴趣的人士阅读。......一起来看看 《SNS浪潮》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具