【vue-cli3升级】老项目提速50%(一)

栏目: 编程语言 · 发布时间: 5年前

内容简介:入职公司到现在差不多一个半月了,负责A业务线,项目涉及运营后台、A业务客户端等。之前已经完成了对运营后台A模块的重构工作,最近也已经初步完成了对A业务客户端项目的升级,所以今天分享一下新项目基于*PS:虽然有点标题党,但是**50%*另:本人前端小菜,本文不作为任何形式的教程、指南,个人实际工作的分享,不喜勿喷

入职公司到现在差不多一个半月了,负责A业务线,项目涉及运营后台、A业务客户端等。之前已经完成了对运营后台A模块的重构工作,最近也已经初步完成了对A业务客户端项目的升级,所以今天分享一下新项目基于 vue-cli3 做工程的升级。

*PS:虽然有点标题党,但是**50%* 这个数字并非空穴来风,后面会有初步数据对比...

另:本人前端小菜,本文不作为任何形式的教程、指南,个人实际工作的分享,不喜勿喷

起因

很多人会问为什么要做项目升级?这个我也不好描述,每个公司环境不一样

我也想问为什么不做升级?大概率是因为懒和怕生产出问题吧,哈哈...

原项目基于 vue-cli2.8.1 + webpack2.2.1 + vue2.4.2 (莫慌,我也感觉很奇怪的版本组合,想一下大概曾经是只升级了语法吧),本来打算是将 webpack2 升级到 webpack4 ,然后在项目中增加配置 eslint、GitHooks、Mock ,真正动手的时候直接另起项目,基于 vue-cli3.3 构建。

动手 => 项目完成共耗时 2.5

新老项目初步对比

因为项目未测试上线,所以生成环境运行数据对比缺失。

单看 npm inpm build 前后对比,提速 50% 不过分吧

old new
依赖包 1604 1400
install耗时 37.507s 19.547s
build耗时 24517ms 11569ms
dist目标文件 714.57KB 657.94KB
eslint - standard(recommand严格模式)
GitHooks - :heavy_check_mark:
本地mock集成 - :heavy_check_mark:
其他优化 陆续进行中
...

Vue-cli3 升级

安装

摘抄 vue-cli 文档

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -gyarn global remove vue-cli 卸载它。 Vue CLI 需要Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvmnvm-windows 在同一台电脑中管理多个 Node 版本。

可以使用下列任一命令安装这个新的包:

npm install -g @vue/cli
# OR
yarn global add @vue/cli
复制代码

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue ,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (3.x):

vue --version
复制代码

创建项目

vue-cli 文档

运行以下命令来创建一个新项目:

vue create my-project
复制代码

接下去选取一个 preset。

你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

【vue-cli3升级】老项目提速50%(一)

如果你决定手动选择特性,在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

~/.vuerc 被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项,可以编辑这个文件。

在项目创建的过程中,你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc

分享一份该项目的 preset (老项目用的 less ,个人更倾向于 stylus、scss

{
  "useTaobaoRegistry": false,
  "presets": {
     "bolin": {
      "useConfigFiles": false,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "base",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "less"
    }
  }
}
复制代码

vue create 命令有一些可选项,你可以通过运行以下命令进行探索:

vue create --help
复制代码

项目迁移

Package.json包迁移

项目生成后,首先对 package.json 包进行迁移, script 的命令先不着急。

迁移包其实简单粗暴,将项目中用到的包对号入座进行迁移

static迁移到puclic文件夹,src文件夹替换

老项目的 static 全部迁移到 public 文件夹中, index.html 迁移到 public

vue-cli3public 文件夹不会被 webpack 处理,并部署在网站根目录

官网对public文件夹应用场景的举例:

<script>

看一下我项目的 public 应用

【vue-cli3升级】老项目提速50%(一)

复制老项目的 src 文件夹,替换新项目的 src

这里先替换,暂时不管它

接下来, npm run serve 启动项目吧

不出意外,肯定会有报错的,莫慌,按提示一步步更改。

Failed to mount component: template or render function not defined.

[Vue warn]: Failed to mount component: template or render function not defined.
复制代码

原因分析:

  • 默认引入vue为runtime版本?
  • require引入组件没有.default

解决:

  • 根目录建立 vue.config.js

vue.config.js 介绍请自行看文档吧,码字好累啊

module.exports = {
  configureWebpack: config => {
    config.resolve.extensions = ['.js', '.vue', '.json']
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('vue$', 'vue/dist/vue.esm.js')
      .set('@', resolve('src'))
   }
}
复制代码
  • require 组件时加 .default

注意 require 按需引入 vue 组件的时候,后面加上 .default

例: require('button.vue').default

原因:原先 webpack 在打包 export default 导出的内容结果都是:

{
  default: {
    // 内容
  }
}
复制代码

webpack3+ 打包的内容结果是:

{
  // 内容
}
复制代码

Autoprefixer applies control comment to whole block, not to next rules.

/* autoprefixer:off */
...
/* autoprefixer:on */

修改为
/* autoprefixer:ignore next */
...
复制代码

You should write display: flex by final spec instead of display: box

display: flex
代替
display: box
复制代码

eslint报错

因为老项目并未启用 eslint ,跑了下 npm run linterrors 大概有 1000+ ,花了半天时间修复了所有错误。

提供一份 eslint 配置和 vscode 设置中 eslint 的处理(这个其实在我之前的 回顾两年前整理的前端规范 中有描述)

.eslintignore

src/assets
src/lib
src/ngmmdebug.js
dist/
output.js
复制代码

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/recommended',
    'eslint:recommended',
    'standard'
  ],
  rules: {
    'camelcase': [0, {
      'properties': 'always'
    }],
    'no-console': 'off',
    'no-debugger': 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}
复制代码

vscode设置eslint相关

"eslint.options": {
    "configFile": ".eslintrc.js"
  },
  "eslint.alwaysShowStatus": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    }
  ]
复制代码

码字好累啊,还是敲代码自在

码字好累啊,要放飞自我啊

码字好累啊,今天周六啊!我的周末在哪里

后面会是更多的升级问题修复以及webpack优化的工作描述,未完待续~~~


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

松本行弘的程式世界

松本行弘的程式世界

松本行弘 / 鄧瑋敦 / 博碩 / 2010年07月27日

讓Ruby之父教您大師級的程式思考術! 本書以松本行弘先生對程式本質的深層認知、各種技術之優缺點的掌握,闡述Ruby這套程式語言的設計理念,並由此延伸讓您一窺程式設計的奧妙之處。本書內含許多以Ruby、Lisp、Smalltalk、Erlang、JavaScript等動態語言所寫成的範例,從動態語言、函數式程式設計等領域開展您的學習視野。 本書精華: ‧物件導向與抽象化 ‧......一起来看看 《松本行弘的程式世界》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具