专栏首页前端有的玩我在项目中是这样配置Vue的

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

独在公司加夜班,行行代码心甚寒。不知功能何时完,杀了产品来祭天。

在前面的文章中,我为大家带来了许多Vue 实战技巧,也得到了大家的许多好评,但中间还是存在着些许漏洞,在此向大家表示歉意。其实在前面那些技巧之外,我们还可以做的更多,让我们的开发流程更流畅,开发体验更好,项目性能更上一层楼,怎么做呢,我们一起来看看。

阅读小编近期的热门Vue相关文章,感谢各位掘友和群友支持,每周一,不见不散

实战技巧,Vue原来还可以这样写 获赞 2400+

绝对干货~!学会这些Vue小技巧,可以早点下班和女神约会了 获赞 1150+

前方高能,这是最新的一波Vue实战技巧,不用则已,一用惊人 获赞 1000+

学会使用Vue JSX,一车老干妈都是你的 获赞600+

看到赚到!重读vue2.0风格指南,我整理了这些关键规则 获赞 150+

本文内容来源于小编将开源的一个基于vant封装的开箱即用框架的一部分,本框架内部集成了包括:完整项目目录结构, 移动端适配,vant按需加载,mock,静态资源压缩,axios二次封装,日期工具类,cdn,代码规范等内容,可以做到下载即使用,无需做任何基础配置,欢迎大家使用,仓库地址 https://github.com/snowzijun/vue-vant-base,如果喜欢,麻烦给小编一个star,小编会持续更新。

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

在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对待吗进行混淆压缩,只为了让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的文件

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

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',
    {
      exclude: ['error', 'warn']
    }
  ])
}

module.exports = {
   plugins: [
     ...prodPlugin
   ]
}

开启eslint,stylelint

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

本节所有代码在github仓库中已上传,完整代码请查看 https://github.com/snowzijun/vue-vant-base

安装依赖

在配置这些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
  • stylelint
  • Prettier - Code formatter

配置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

上面配置完之后,写代码时候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进行代码校验,校验失败无法提交

结语

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

本文分享自微信公众号 - 前端有的玩(gh_918bae0a9616),作者:子君

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue-CLI 项目在pycharm中配置

    小小咸鱼YwY
  • 入职第三天:vue-loader在项目中是如何配置的

    这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少?

    闰土大叔
  • 在不同 webpack 版本的 Vue 项目中配置 Storybook

    江米小枣
  • TypeScript + Vue 项目的 Eslint中解构配置

    该文讲解Eslint 配置项 prefer-destructuring在TypeScritp + Vue 项目中使用和配置

    Mr.Teen
  • 我对SAP项目实施是这样理解的

    顾问是一个职位,泛指在某件事情的认知上达到专家程度的人,他们可以提供顾问服务,顾问提供的意见以独立、中立为首要。

    matinal
  • Vue2.5笔记:如何在项目中使用和配置Vue

    最开始的项目开发中,我们如果使用第三方的库我们会直接在项目中直接使用 script 元素标签引入即可。

    六小登登
  • echarts的学习(九)前端项目开发,vue项目的搭建,也就是环境的配置

    就是这个echarts在各个组件里面都会使用,所以,我们要在vue项目里面的全局使用

    一天不写程序难受
  • 如何在vue项目中配置你自己的启动命令和打包命令

    在开发中,通常会需要和后台做一些开发调试, 本地开发, 和线上观测 这时 如何用一套代码 加上 几个命令来轻松的做到这些?

    yangdongnan
  • VUE项目后台管理系统(一)创建一个空的vue项目,之后在这个项目里面写我们需要的东西

    一天不写程序难受
  • 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    axios 默认提交格式为:application/json 可使用 qs 模块(需要安装)转换后提交格式为 application/x-www-form-u...

    易墨
  • 一个完整的项目交换机配置是怎样来完成的?

    这里接入层就以交换机 ACC1 ( S2750 ) ,核心交换机 CORE ( S5700 ) 和出口路由器 Router ( AR 系列路由器) 为例。

    用户8611941
  • 这个项目,我们的合作对象是全体中国人!

    这个项目: 十年一次 全体中国人都要参与 十五天内完成 是的,第七次全国人口普查要来了。 人口普查“数清楚”了中国的人口状况,也见证了技术演进的一段历史。 第...

    腾讯大讲堂
  • 在阿里Java大牛们都是这样对Java项目代码分层的

    代码分层,对于任何一个Java开发来说应该都不陌生。一个好的层次划分不仅可以能使代码结构更加清楚,还可以使项目分工更加明确,可读性大大提升,更加有利于后期的维护...

    程序员追风
  • 安装node.js 环境,这样前段的vue项目就可以在cmd里面启动了

    将node.exe 所在的目录添加到path环境变量,这样我们在使用命令行时就可以在任意路径使用node命令了,

    一天不写程序难受
  • Spring Security的配置文件是如何被项目引入的,也就是有了springsecurity.xml ,还需要什么配置,项目就可以使用这个springsecurity.xml了

    之前我们创建了项目,导入了springsecurity的依赖,在web.xml里面写了SpringSecurity核心过滤器链

    一天不写程序难受
  • 在找一份相对完整的Webpack项目配置指南么?这里有

    Webpack已升级为v4版本,优化之后性能提升好几倍,请移步这个 webpack4项目配置Demo,以及 这篇升级优化点

    书童小二
  • 我是这样重构整个研发项目,促进自动化运维DevOps的落地?

    先说下背景,我们是一家小公司,虽然打着做产品的旗帜,但是每个客户都有大量的个性化功能,这里指各个客户的java端、Android端、ios端(大部分功能代码是相...

    DevOps时代
  • 我是如何在微人事项目中提高RabbitMQ消息可靠性的?

    公众号后台回复 SpringBoot,免费获取 274 页SpringBoot修炼手册。

    江南一点雨
  • 使用Vite2+TypeScript4+Vue3技术栈,如何入手开发项目

    已经两周没有发文了,自己临时有点事耽误了,在这里向大家表示深深地歉意。今天,我们使用vite2.0+vue3+ts来开发一个demo项目。

    用户3806669

扫码关注云+社区

领取腾讯云代金券