当前位置: 首页 > Web前端 > vue.js

Vue3x相比2x常用的写法变化

时间:2023-03-31 15:45:20 vue.js

欢迎大家关注我的技术博客:style'me的个人博客。以下改动是关于vue3x项目创建到启动的,供大家参考。如果您打算使用3x版本进行项目开发,建议您升级到更高版本进行相关配置。例如:1、如果你使用3x版本的element-ui,建议你选择element-plus,这是专门为vue3x定制的版本。2.vue-router建议升级到4.0以上版本,更好的兼容vue3x3和vuex建议升级到4.0以上版本,更好的兼容vue3x4。如果你想在你的项目中使用sass,建议你安装sass和sass-loader。sass-loader的版本建议为10.1.1版本,这样可以更好的兼容vue3x/*安装element-plus*/cnpminstallelement-plus-S/*安装路由4.0以上版本*/npminstallvue-router@4/*安装vuex4.0以上版本*/npminstallvuex@4/*安装sass和sass-loader*/npminstallsasssass-loader@10.1.11,安装区别/*2xvue项目脚手架安装method*/vueintwebpackprojectName/*3xvue项目脚手架安装方法*/vuecreateprojectName2,projectMountdifference/*2xmain.jsmount*/importVuefrom"vue"importAppfrom"./App.vue"newVue({render:h=>h(App)}).$mount("#app")/*3xmain.jsmount*/import{createApp}from"vue"从"./App.vue"导入AppcreateApp(App).mount("#app")3、插件挂载和全局注册使用的区别/*2x插件挂载和全局注册使用的区别*/importVuefrom"vue"importAppfrom"./App.vue"Vue.use(ElementUI,axios,animated)/*2x注册全局插件使用原型*/Vue.prototype.$echarts=echartsnewVue({render:h=>h(App)}).$mount("#app")/*3x插件挂载和全局注册使用*/import{createApp}from"vue"importAppfrom"./App.vue"constapp=createApp(App)/*3x注册全局插件使用app.config.globalProperties*/app.config.globalProperties.$echarts=echartsapp.use(ElementPlus,{locale})app.use(router)app。use(store)app.mount("#app")下图是vue2x和vue3x项目挂载和插件使用的一些api变化4.路由注册创建/*2x路由注册创建*/importVuefrom"vue"importVueRouterfrom"vue-router"/*RouterPage是我自己的路由管理文件*/importRouterPagefrom"./RouterPage/"Vue.use(VueRouter)constrouter=newVueRouter({mode:"hash",base:process.env.BASE_URL,})router.addRoutes([...RouterPage]);exportdefaultrouter/*3x路由注册创建*/import{createRouter,createWebHistory,createWebHashHistory}from"vue-router"importRoutersPagefrom"@/router/RouterPage/index"我是来自“@/router/RouterPage/base”的端口RouterBaseconstrouter=createRouter({history:createWebHashHistory(),scrollBehavior:()=>({y:0}),routes:[...RoutersPage,...RouterBase]})exportdefaultrouter下图是3x和4x版本vue-routerapiVuex.Store({state:{},mutations:{},actions:{},modules:{}})/*3xvuexcreate*/import{createStore}from"vuex";exportdefaultcreateStore({state:{},mutations:{},actions:{},modules:{}})项目创建配置到启动基本上涉及到这几个需要注意的点,但是在使用过程中也有很多变化,例如:在3x版本中ifv-if同时使用v-if和v-for的优先级总是最高的。再比如:取消访问子组件的this.$children方法等,这些在项目开发中经常用到。有兴趣的可以移步官网进行更深入的学习,vue3x学习https://v3.cn.vuejs.org/guide...