@vue/cli 5.0.8 项目依赖版本参照

有的同学,可能是在维护迭代老的项目, 脚手架是从 @vue/cli 3.x ,想要升级到 5.x 获得更好的开发体验, 可以参照下面的

@vue/cli 应该是以后不会再更新了, 5.0.8应该是最后一个版本,大家可以迁移到 vite相关的生态,迁徙是一条漫长的道路

依赖包

json 复制代码
  "scripts": {
    "lint-staged": "lint-staged"
 },
 "dependencies": {
    "axios": "^1.5.0",
    "core-js": "^3.30.2",
    "element-ui": "2.15.13",
    "vue": "^2.7.14",
    "vue-router": "^3.6.5",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/eslint-parser": "^7.21.8",
    "@commitlint/cli": "^17.6.3",
    "@commitlint/config-conventional": "^17.6.3",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-prettier": "^7.1.0",
    "chalk": "^4.1.2",
    "eslint": "^8.41.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.13.0",
    "husky": "^8.0.3",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "lint-staged": "^13.2.0",
    "prettier": "^2.8.8",
    "sass": "^1.62.1",
    "sass-loader": "^13.2.2",
    "semver": "^7.5.1"
  },

稳定运行在node 14.21.3 版本

公司内部项目也很多 ,部分项目在有时间的条件下,升级到 5.0.8 以后, 稳定运行一年以上,没有出现无法解决的问题

其中, chalk 这个必须锁版本号, 4.1.2 , 因为 5.x的版本是采用 ESM的方式, 在配置一些脚本,会出现加载报错, 还是加载方式的问题。

husky 也是从 4.x 升级到 8.x 版本, 也是稳定运行

babel配置

js 复制代码
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    [
      '@vue/babel-preset-jsx',
      {
        "injectH": false
      }
    ]
  ]
}

其实很多人在开发或者使用webpack等一众脚手架上,出现的问题,很多是版本号对应不上的导致的, 这个可以很好的参照

vue从 2.5, 2.6 升级到 2.7 , 需要关注一下 deep语法的改变即可

sass 和less 深度选择器

html 复制代码
<style lang="scss" scoped>
<!--语法错误-->

/deep/ .box {}

<!---语法警告 能运行 但是不建议这样写-->
::v-deep .box {}

<!--推荐 正确写法-->
:deep(.el-menu) {

}
</style>
相关推荐
会飞的鱼先生6 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
晓得迷路了7 分钟前
10 分钟开发一个 Chrome 插件?Trae 让你轻松实现!
前端·javascript·trae
秋天的一阵风12 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风13 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
海底火旺33 分钟前
JavaScript中的Object方法完全指南:从基础到高级应用
前端·javascript·面试
海底火旺33 分钟前
JavaScript中的Symbol:解锁对象属性的新维度
前端·javascript·面试
天天扭码34 分钟前
一文吃透 ES6新特性——解构语法
前端·javascript·面试
Kagerou35 分钟前
组件测试
前端
JustHappy37 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
张可1 小时前
历时两年半开发,Fread 项目现在决定开源,基于 Kotlin Multiplatform 和 Compose Multiplatform 实现
android·前端·kotlin