Vue3全家桶，从零到一个实战项目，新手有福了

前端开发百花齐放，一招不熟。不知道从何下手的，关注小编升柏树。我是前端人，专注分享前端内容！本文主要是使用vite创建一个vue3项目，练习vie-router4vuex4结合compositionAPI的使用。目的是让没有接触过vue3的同学快速上手。一、vue3.0创建项目在vue3中创建项目有两种方式。第一个是官方推荐的vite。另一种是使用webpack来创建。1.1、vite创建项目vite需要Node.js>=12.x版本。所以在使用vite搭建项目之前，请先检查一下node版本！运行：$npminitvite@latest命令，然后根据提示选择要创建的项目类型。具体步骤可以参考文章《什么，你还使用 webpack?别人都在用 vite 搭建项目了》。您还可以通过附加命令行选项来指定要使用的模板。例如：npminitvite@latestmy-vue-app--templatevue使用最新的vite创建vue模板项目。工程目录如图：1.2.使用webpack创建项目，使用vue/cli脚手架创建vue3项目时，需要升级vuecliv4.5版本！使用vue-V查看版本。如果版本太低，请全局重新安装。npminstall-g@vue/cli使用命令开始创建项目：vuecreateproject-name选择需要创建的vue3项目，根据提示创建项目。1.3.vite与webpack的优缺点本文我们选择第一种方式vite创建learn-vue3项目。2、vue-router4项目创建完成后，我们首先要做的就是配置路由。添加路由时，需要在main.js中引入router。main.js代码：import{createApp}from'vue'importAppfrom'./App.vue'createApp(App).mount('#app')这时候发现和创建实例完全不一样vue2、vue3使用createApp，使用前需要导入。2.1.导入路由在vue3中使用vue-router时，需要安装vue-router4。npminstallvue-router@4安装完成后，可以在package.json文件中查看vue-router的版本。{"dependencies":{"vue":"^3.2.25","vue-router":"^4.0.12"}}vue-router4的大部分API保持不变，但在vue3中以一个插件，所以在创建的时候会有一定的变化。新建一个router文件夹，新建一个index.js文件//1，引入方法import{createRouter,createWebHashHistory}from"vue-router"//2，定义一些路由constroutes=[//每个路由都需要映射到一个组件]//3。创建一个路由实例construuter=createRouter({routes,history:createWebHashHistory("./")})exportdefaultrouter然后到main.js中将路由挂载到该实例上。import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom./router/index"createApp(App)//整个应用支持routing.use(router).mount('#app')2.2,在src目录下创建组件配置路由，新建pages文件夹，新建index.vue文件：在router.js文件中，定义路由constroutes=[{path:"/",component:()=>import("../pages/index.vue")}]并在App.vue文件中添加router-view容器。这时候你可以看到新建的索引运行项目.vue的内容就没有了。3、结合compositionAPI使用vue-router43.1，compositionAPICompositionAPI中文称为combinedAPI。它是Vue3特有的，vue3也可以向后兼容OptionsAPI。setup函数是组合API的入口点。它介于生命周期钩子函数beforeCreate和created之间。因此，当setup中的属性和方法被外部使用时，需要先通过return暴露出来。修改index.vue组件以使用组合API。3.2.响应式数据在上面的例子中，如果我们在模板中打印msg，我们会发现响应式是无效的。是因为设置中的自定义属性没有响应能力。vue3的响应式原理是将数据通过底层proxy代理进行包装，使其响应式。vue3的响应式原理详见《vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能?》其中msg是基本数据类型，数据可以通过ref进行封装。在使用ref之前，需要先从vue导入。修改脚本中的代码这时候在input或者setup中更改msg的值，比如：此时msg的任何修改都会保证实时回复。类似于ref是反应性的。ref是让基础数据类型响应式，reactive是让引用数据类型响应式。3.3.如何组合使用路由？在项目中，导航选项卡是很常见的。在App.vue文件中，添加两个导航：如果将上面的路由跳转方式改为push，如何修改在compositionAPI中使用路由时，需要先导入userRouter方法，调用该方法，生成路由器。例如：import{useRouter}from'vue-router'constrouter=useRouter()router就是路由【导航对象】。当要获取当前路由时，使用useRoute方法，如：import{useRoute}from'vue-router'constroute=useRoute()route为当前激活的路由状态信息对象，包括所有路由参数、params、query都属于它。修改上面的路由跳转方式使用push，代码如下：:'/my'})}return{go}}}路由参数传递和参数获取，只需将之前的this.$router替换为router即可。4.vuex4vuex是专门为vue.js应用开发的状态管理模式+库。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。vue3中使用了vuex4。vuex4提供了与vuex3相同的API。安装：npminstallvuex@nextpackage.json检查版本"dependencies":{"vue":"^3.2.25","vue-router":"^4.0.12","vuex":"^4.0.2"}4.1,引入vuex状态管理vuex4创建store实例时，使用createStore函数创建，使用前需要引入createStore。在src目录下，新建store文件夹下创建index.js：import{createStore}from"vuex"//新建store实例conststore=createStore({state:{name:'front-endperson'},getters:{},mutations:{},actions:{},modules:{}})exportdefaultstore将商店实例作为插件安装在main.js中。import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom"./router/index"importstorefrom"./store/index"createApp(App).use(router).use(store).mount('#app')4.2。获取状态信息在App.js文件中，使用状态信息，与vuex3相同。5.Vuex结合compositionAPIincombinedAPI使用storein时，需要先使用useStore将store导入到组件中，才能进行操作。使用前需要引入useStore，然后调用。5.1.操作vuex状态信息vuex中同步操作数据是commit调用的mutations中的方法，异步操作是dispatch调用的actions中的方法。示例1：mutations中的方法修改了name的值。//Mutationsinindex.js:{changeName(state,data){//data是要修改的值state.name=data}}//例1：actions中的方法修改name的值。actions中的方法没有办法直接操作state的状态信息，只有mutations中的方法可以，所以需要调用mutations的方法来实现修改。index.js代码import{createStore}from"vuex"conststore=createStore({state:{name:'前端人'},getters:{getName(state){returnstate.name}},mutations:{changeName(state,data){state.name=data}},actions:{changeVal(state){//借用setTimeout模拟异步操作setTimeout(()=>{state.commit('changeName','我是前端person')},2000)}},modules:{}})exportdefaultstoreApp.vue代码