前端发展百花放，一技未熟百技出。未知那边去下手，暖热小编胜百书。 我是前端人，专注共享前端试验!

本篇著述主如若，使用 vite 创建一个vue3 神气，施行 vie-router4 vuex4 勾搭 componsition API 的使用。经营是让未战争过 vue3 的同学快速上手。

一、vue3.0 创建神气

vue3 创建项经营时辰有两种时势，第一种即是官方推选的 vite 。另外一种即是使用 webpack 创建。

1.1、vite 创建神气

vite 需要 Node.js >= 12.x版块。是以使用 vite 搭建神气之前，请先查验 node 版块!

运行 ：$ npm init vite@latest 号召，然后按照指示信息选择创建项经营类型。具体的要领不错参考《什么，你还使用 webpack?他人都在用 vite 搭建神气了》著述。

也不错通过附加号召行选项，指定使用的模板。如：

npm init vite@latest my-vue-app --template vue 

使用最新 vite 创建 vue 模板神气。

神气目次如图所示：

1.2、webpack 创建神气

使用 vue/cli 脚手架创建 vue3 神气时，需要升级 vue cli v4.5版块!使用 vue -V 查验版块，如果版块过低时，请全局从头装置。

npm install -g @vue/cli  

使用号召，运行创建神气：

vue create project-name 

选择需要创建 vue3 神气，证据指示创建神气就不错了。

1.3、vite 与 webpack 比较优舛误

在本篇著述内，咱们选择 第一种时势 vite 创建一个 learn-vue3 的神气。

二、vue-router4

神气创建完成之后，咱们要做的第一件事即是建立路由了，添加路由的时辰，需要在 main.js 内引入 router。

main.js 代码：

import { createApp } from 'vue' import App from './App.vue'  createApp(App).mount('#app') 

此时发现与 vue2 的创建实例十足不相似，vue3 使用的是 createApp ，使用前需要先引入。

2.1、引入路由

在 vue3 中使用 vue-router 时，需要装置 vue-router 4 。

npm install vue-router@4 

装置之后不错在 package.json 文献中稽查 vue-router 的版块。

{   "dependencies": {     "vue": "^3.2.25"，     "vue-router": "^4.0.12"   } } 

vue-router 4 的大巨额的 API 是保持不变的，可是在 vue3 中以插件神情存在，是以在创建的时辰有一定的调动。

新建 router 文献夹，新建 index.js 文献

// 1、按需引入法子 import { createRouter， createWebHashHistory } from "vue-router" // 2、界说一些路由 const routes = [     // 每个路由都需要映射到一个组件 ] //3、创建路由实例 const router = createRouter({   routes，   history:createWebHashHistory("./") })  export default router 

 然后到 main.js 中，将路由挂载到实例上。

import { createApp } from 'vue' import App from './App.vue' import router from "./router/index"  createApp(App) //通盘期骗复旧路由 .use(router) .mount('#app') 

2.2、新建组件建立路由

在 src 目次下，新建 pages 文献夹，国产精品国产三级国产av新建 index.vue 文献：

<template>  首页进口 </template> 

在 router.js 文献内，界说路由

const routes = [  {   path:"/"，   component:()=>import("../pages/index.vue")  } ] 

然后在 App.vue 文献内添加 router-view 容器。

<template>   <img alt="Vue logo" src="./assets/logo.png" />   <router-view></router-view> </template> 

此时运行项经营时辰就能看到新建的 index.vue 的试验了。

三、vue-router4 勾搭 composition API 使用 3.1、composition API

composition API 华文叫做组合式API，它是 Vue3 独到的，同期 vue3 也玩忽向下兼容 Options API。

setup 函数即是 composition API 的进口，是处于人命周期钩子函数 beforeCreate 和 created 两个函数之间，是以 setup 中的属性和法子在外部使用时，需要先 return 暴漏出去。

修改 index.vue 组件，罗致 composition API 。

<template>  <div>   <input type="text" v-model="msg" />  </div> </template>  <script> export default {  setup() {   const msg = '前端人，前端魂'   return {    msg，   }  } } </script> 

3.2、反应式数据

上述的实例中中，如果咱们在 template 内，打印 msg 的时辰，就会发现反应式失效。

<template>  <div>   <input type="text" v-model="msg" />   {{ msg }}  </div> </template> 

是因为在 setup 内地自界说属性不具备反应式智商。vue3 的反应式旨趣是 通过底层代理 proxy 将数据包装一下，使得具有反应式。vue3 的反应式旨趣笃定可稽查《vue3 学习条记 (五)——vue3 的 setup 何如完了反应式功能?》

此处 msg 是一个基础数据类型，不错通过 ref 包装下数据，ref 使用之前需要从 vue 中先引入。修改 script 中的代码

<script> import { ref } from 'vue' export default {  setup() {   const msg = ref('前端人，前端魂')   return {    msg，男女无遮挡猛进猛出免费视频   }  } } </script> 

此时在 input 或在 setup 内调动 msg 的值，如：

<script> import { ref } from 'vue' export default {  setup() {   const msg = ref('前端人，前端魂')   setTimeout(()=>{    msg.value = "我是前端人"   }，3000)   return {    msg，   }  } } </script> 

此时无论何如修改 msg 都会保阐发时反应。

与 ref 肖似的还有 reactive 。ref 是让基础数据类型具有反应式，reactive 是让援用数据类型具有反应式。

3.3、组合式内何如使用路由?

一个神气中，导航选项卡是很常见的，在 App.vue 文献内，加入两个导航：

<template>  <router-view></router-view>  <router-link to="/">首页</router-link>  <router-link to="/my">我的</router-link> </template> 

如果把上述路由跳转时势修改成 push 时，何如修改呢?

composition API 内使用路由时，需要先导入 userRouter 法子，调用该法子，生成 router。

如：

import { useRouter } from 'vue-router' const router = useRouter() 

router 是路由【导航对象】。

想要取稳妥前路由时，使用 useRoute 法子，如：

import { useRoute } from 'vue-router' const route = useRoute() 

 route 是现时激活的路由景况信息对象，包含总共路由中的参数，params， query 都属于它。

修改上边路由跳转时势使用 push ，代码如下：

<script > import { useRouter } from 'vue-router' export default{  setup(){   const router = useRouter()   function go() {    router.push({ path: '/my' })   }   return{    go   }  } } </script>  <template>  <router-view></router-view>  <router-link to="/">首页</router-link>  <button @click="go">我的</button> </template> 

路由传参以及参数取得，只需要把之前的 this.$router 换成 router 就不错啦。

四、vuex 4

vuex 是专为 vue.js 期骗尺度建造的景况解决模式+库。它罗致接洽式存储解决期骗的总共组件的景况，并以相应的国法保证景况以一种可量度的时势发生变化。

在 vue3 中使用的是 vuex4 。vuex4 提供了和 vuex3 交流的 API 。

装置：

npm install vuex@next 

package.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 实例 const store = createStore({  state: {   name:'前端人'  }，  getters: { }，  mutations: { }，  actions: { }，  modules: { } })  export default store 

 在 main.js 中将 store 实例行为插件装置。

import { createApp } from 'vue' import App from './App.vue' import router from "./router/index" import store from "./store/index"  createApp(App).use(router).use(store).mount('#app') 

4.2、取得景况信息

在 App.js 文献内，使用景况信息，这与 vuex3 使用时势交流。

<template>  取得 state 内的景况信息  {{ this.$store.state }}  取得 getters 内的属性  {{ this.$store.getters.getName }} </template> 

五、vuex 勾搭 composition API

在 组合式 API 中使用 store 时，需要使用 useStore 把 store 引入组件，然后才气操作。

<script> import { useStore } from 'vuex' export default {  setup() {   const store = useStore()   console.log('store'， store.state.name)  }， } </script> 

useStore 使用之前，需要先引入，然后调用。

5.1、操作 vuex 景况信息

vuex 中同步操作数据是由 commit 调用 mutations 内的法子，异步操作是 dispatch 调用 actions 内的法子。

示例1：mutations 内法子修改 name 的值。

// 在 index.js 内 mutations: {  changeName(state，data) {    //data 是传入要修改的值   state.name = data  } }  //App.vue 内 <script> import { useStore } from 'vuex' export default {  setup() {   const store = useStore()   console.log('store'， store.state.name)   store.commit('changeName'， '我是前端人')   console.log('store'， store.state.name)  } } </script> 

 示例1：actions 内法子修改 name 的值。

actions 内的法子是莫得倡导径直操作 state 的景况信息，唯一 mutations 内的法子才不错，是以需要调用 mutations 的法子，完了修改 。

index.js 代码

import { createStore } from "vuex"  const store = createStore({  state: {   name:'前端人'  }，  getters: {   getName(state) {    return state.name   }  }，  mutations: {   changeName(state，data) {    state.name = data   }  }，  actions: {   changeVal(state) {     // 借用setTimeout 模拟异步操作    setTimeout(() => {     state.commit('changeName'，'我是前端人')    }，2000)   }  }，  modules:{} }) export default store 

App.vue 代码

<script> import { useStore } from 'vuex' export default {  setup() {   const store = useStore()   store.dispatch('changeVal')  } } </script> <template>  {{ this.$store.state.name }}  {{ this.$store.getters.getName }} </template>