乐趣区

关于vue.js:vue3x相对于2x常用的写法变化整理

jiezi

欢送大家关注我的技术博客：style’me 的集体博客
以下对于 vue3x 我的项目创立到启动的一些变动，供大家参考，如果您筹备应用 3x 版本作为我的项目开发，相干配置建议您降级到更高的版本，比方：

1、在 3x 版本中如果您应用 element-ui，建议您抉择 element-plus，这是专门为 vue3x 定制的版本
2、vue-router 建议您降级到 4.0 版本以上，更好的兼容 vue3x
3、vuex 建议您降级到 4.0 版本以上，更好的兼容 vue3x
4、若您想在我的项目中应用 sass，建议您装置 sass 和 sass-loader 即可，sass-loader 版本倡议在 10.1.1 版本，这样能力更好的兼容 vue3x

/* 装置 element-plus*/
cnpm install element-plus -S

/* 装置路由 4.0 版本以上 */
npm install vue-router@4

/* 装置 vuex4.0 版本以上 */
npm install vuex@4

/* 装置 sass 和 sass-loader*/
npm install sass sass-loader@10.1.1

1、装置区别

/*2x vue 我的项目脚手架装置办法 */
vue int webpack projectName

/*3x vue 我的项目脚手架装置办法 */
vue create projectName

2、我的项目挂载区别

/*2x main.js 挂载 */
import Vue from "vue"
import App from "./App.vue"
new Vue({render: h => h(App)
}).$mount("#app")

/*3x main.js 挂载 */
import {createApp} from "vue"
import App from "./App.vue"
createApp(App).mount("#app")

3、插件挂载和全局注册应用区别

/*2x 插件挂载和全局注册应用 */
import Vue from "vue"
import App from "./App.vue"
Vue.use(ElementUI, axios,animated)
/*2x 注册全局插件应用 prototype*/
Vue.prototype.$echarts = echarts
new Vue({render: h => h(App)
}).$mount("#app")

/*3x 插件挂载和全局注册应用 */
import {createApp} from "vue"
import App from "./App.vue"
const app = createApp(App)
/*3x 注册全局插件应用 app.config.globalProperties*/
app.config.globalProperties.$echarts = echarts
app.use(ElementPlus,{locale})
app.use(router)
app.use(store)
app.mount("#app")

上面图片是 vue2x 和 vue3x 再我的项目挂载和插件应用上得一些 api 的变动

4、路由注册创立区别

/*2x 路由注册创立 */
import Vue from "vue"
import VueRouter from "vue-router"
/*RouterPage 是我本人的路由管理文件 */
import RouterPage from "./RouterPage/"
Vue.use(VueRouter)
const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
})
router.addRoutes([...RouterPage]);
export default router


/*3x 路由注册创立 */
import {createRouter,createWebHistory,createWebHashHistory} from "vue-router"
import RoutersPage from "@/router/RouterPage/index"
import RouterBase from "@/router/RouterPage/base"
const router = createRouter({history:createWebHashHistory(),
  scrollBehavior: () => ({ y: 0}),
  routes:[...RoutersPage,...RouterBase]
})
export default router

上面的图片是 vue-router 的 3x 和 4x 版本的 api 对应变动

5、vuex 创立区别

/*2x vuex 创立 */
import Vue from "vue"
import Vuex from "vuex"
export default new Vuex.Store({state: {},
  mutations: {},
  actions: {},
  modules: {}})


/*3x vuex 创立 */
import {createStore} from "vuex";
export default createStore({state: {},
  mutations: {},
  actions: {},
  modules: {}})

我的项目创立配置到启动根本波及这些须要留神的点，然而在应用过程中也有很多变动，比方：
在 3x 版本中如果 v-if 和 v-for 同时应用 v-if 的优先级永远是最高的，再比方：拜访子组件的 this.$children 办法被勾销等等，这些在我的项目开发中常常用到，如果您有趣味能够移步与官网更深刻的学习，vue3x 学习 https://v3.cn.vuejs.org/guide…

退出移动版