
小小的改进,大大的提升
只需要简单修改,开发体验得到大大提升.
不能拒绝的理由:
语法?.、空值合并:??)vue升级到^2.7.0"dependencies": {
// "vue": "2.6.12"
"vue": "^2.7.0"
}
vue-loader升级到 ^15.11.1"devDependencies": {
//"vue-loader": "^15.7.0"
"vue-loader": "^15.10.0"
}
@vue/cli-xxx 将本地的 @vue/cli-xxx 依赖升级至所在主版本范围内的最新版本 (如有):
~4.5.18~5.0.6vue 升级至 ^2.7.0同时你可以从依赖中移除 vue-template-compiler——它在 2.7 中已经不再需要了。
注意:如果你在使用 @vue/test-utils,那么 vue-template-compiler 需要保留,因为该测试工具集依赖了一些只有这个包会暴露的 API。
vue相关依赖
vue-loader: ^15.10.0vue-demi: ^0.13.1由于项目版本 vuex、vue-router 均为 v3,组合式 API 中,我们需要使用一些新的函数来代替访问 this等方法,如:this.$store、this.$router、this.$route。
解决方案:也用到了 getCurrentInstance,通过它封装一些方法使用。
import { getCurrentInstance } from 'vue'
export function useStore() {
const { proxy } = getCurrentInstance()
const store = proxy.$store
return store
}
export function useRoute() {
const { proxy } = getCurrentInstance()
const route = proxy.$route
return route
}
export function useRouter() {
const { proxy } = getCurrentInstance()
const router = proxy.$router
return router
}
同样我们第三方库的方法,比如: this.$message等方法也不能使用了,这里也放到上面的工具js中.
/**
* 升级vue2.7辅助函数
*/
import { getCurrentInstance } from 'vue'
/** this.$store替换方案 */
export function useStore() {
const { proxy } = getCurrentInstance()
const store = proxy.$store
return store
}
/** this.$route替换方案 */
export function useRoute() {
const { proxy } = getCurrentInstance()
const route = proxy.$route
return route
}
/** this.$router替换方案 */
export function useRouter() {
const { proxy } = getCurrentInstance()
const router = proxy.$router
return router
}
/** this.$message方法替换方案 */
export function useMessage() {
const { proxy } = getCurrentInstance()
const message = proxy.$message
return message
}
/** this.$modal替换方案 */
export function useModal() {
const { proxy } = getCurrentInstance()
const modal = proxy.$modal
return modal
}
更新后,如果有::v-deep、/deep/相关的报错或者警告,需要改用:deep()
在使用 setup 语法糖的时候由于内部变量都是直接声明暴露给模板使用的,所以旧版 eslint 检测到会有未使用的变量的时候会报错 ‘unused…’
"devDependencies": {
"eslint-plugin-vue": "^9.3.0"
}
❌ createApp() (Vue 2 不支持相互隔离的应用 scope)
❌