有的同学,可能是在维护迭代老的项目, 脚手架是从 @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>