Vue3.0beta初体验

时间：2023-03-31 16:28:42 vue.js

检查vue版本?vue-V@vue/cli4.2.3versionifold=>install(mac)vue-cli:?sudonpmi-g@vue/cli.../*再次检查vue版本*/?vue-V@vue/cli4.3.1/*Meizizicheng*/Createaproject->根据项目勾选你需要的这里我选择了这几个比较常用的-->Router,Vuex,CSSPre-processors,Linter/Formatter?vue创建vue-next3.0VueCLIv4.3.1？请选择一个预设：手动选择功能？检查项目所需的功能：?Babel?TypeScript?ProgressiveWebApp(PWA)Support?Router?Vuex?CSSPre-processors??Linter/Formatter?UnitTesting?E2ETesting项目创建后的目录结构├──README。md├──.browserslistrc├──.eslintrc.js├──.gitignore├──babel.config.js├──package-lock.json├──package.json├──public│├──favicon。ico│└──index.html└──src├──App.vue├──assets│└──logo.png├──components│└──HelloWorld.vue├──main.js├──router│└──index.js├──store│└──index.js└──views├──About.vue└──Home.vue目前vue-cli不直接支持创建Vue3.0项目,需要插入可以通过升级项目来实现。升级项目cdvue-next3.0vue添加vue-next，可以看到packjson.json"dependencies":{"core-js":"^3.6.4","vue":"^3.0.0-beta.1","vue-router":"^4.0.0-alpha.5","vuex":"^4.0.0-alpha.1"},可以看到路由router/index.jsimport{createRouter,createWebHistory}来自“vue-router”；从“../views/Home.vue”导入主页；constroutes=[{path:"/",name:"Home",component:Home},{path:"/about",name:"About",组件:()=>import(/*webpackChunkName:"about"*/"../views/About.vue")},]constrouter=createRouter({history:createWebHistory(process.env.BASE_URL),routes});导出默认路由器；我们在/src/views目录下创建intro/index.vue：constroutes=[...{path:"/intro",name:"Intro",component:()=>import(/*webpackChunkName:"intro"*/"../views/intro/index.vue")}]照着例子试试写vue3.0-beta，贴上intro/index.vue的代码html代码

测试计数：{{count}}

<h1>测试计算：{{dobuleCount}}clickmemethod=>add

statefromvuex{{a}}

点我方法=>更新

js代码import{ref,computed,watch,getCurrentInstance}from"vue";exportdefault{//Vue3.0中的初始化状态通过setup方法setup(){//Vue3.0中通过getCurrentInstance方法获取当前组件的实例const{ctx}=getCurrentInstance();//然后通过ctx属性获取当前上下文，ctx.$router是VueRouter实例console.log(ctx.$router.currentRoute.value,"router");//定义状态需要调用ref方法constcount=ref(0);//定义一个事件constadd=()=>{count.value++;};//定义一个监听器//监听器watch也是一个方法，它包含2个参数，都是functionwatch(()=>count.value,val=>{console.log(val,"val");});//定义一个计算属性constdobuleCount=computed(()=>count.value*2);//通过计算属性使用Vuex状态：state.caseNum.aconsta=computed(()=>ctx.$store.state.caseNum.a);//更新Vuexstate仍然使用commit方式，与Vuex3.0版本一致：constupdated=()=>{ctx.$store.commit("setCaseNum",count);};return{count,add,dobuleCount,a,updated};}};setCaseNum是store/index.js中的vuex，写了一个简单的updatedimportVuexfrom"vuex";exportdefaultVuex.createStore({state:{caseNum:{a:1}},mutations:{setCaseNum(state,value){state.caseNum.a=值；}}，操作：{}，模块：{}}）；参考demo：作者：sam9831链接：https://juejin.im/post/5e99c2...来源：掘金