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

开发 前端
本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 componsition API 的使用。目的是让未接触过 vue3 的同学快速上手。

前端发展百花放,一技未熟百技出。未知何处去下手,关注小编胜百书。 我是前端人,专注分享前端内容!

本篇文章主要是,使用 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 搭建项目了》文章。

也可以通过附加命令行选项,指定使用的模板。如:

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

使用最新 vite 创建 vue 模板项目。

项目目录如图所示:

Vue3 全家桶,从 0 到 1 实战项目,新手有福了

1.2、webpack 创建项目

使用 vue/cli 脚手架创建 vue3 项目时,需要升级 vue cli v4.5版本!使用 vue -V 检查版本,如果版本过低时,请全局重新安装。

  1. npm install -g @vue/cli  

使用命令,开始创建项目:

  1. vue create project-name 
Vue3 全家桶,从 0 到 1 实战项目,新手有福了

选择需要创建 vue3 项目,根据提示创建项目就可以了。

1.3、vite 与 webpack 相比优缺点

在本篇文章内,我们选择 第一种方式 vite 创建一个 learn-vue3 的项目。

二、vue-router4

项目创建完成之后,我们要做的第一件事就是配置路由了,添加路由的时候,需要在 main.js 内引入 router。

main.js 代码:

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3.  
  4. createApp(App).mount('#app'

此时发现与 vue2 的创建实例完全不一样,vue3 使用的是 createApp ,使用前需要先引入。

2.1、引入路由

在 vue3 中使用 vue-router 时,需要安装 vue-router 4 。

  1. npm install vue-router@4 

安装之后可以在 package.json 文件中查看 vue-router 的版本。

  1.   "dependencies": { 
  2.     "vue""^3.2.25"
  3.     "vue-router""^4.0.12" 
  4.   } 

vue-router 4 的大多数的 API 是保持不变的,但是在 vue3 中以插件形式存在,所以在创建的时候有一定的改变。

新建 router 文件夹,新建 index.js 文件

  1. // 1、按需引入方法 
  2. import { createRouter, createWebHashHistory } from "vue-router" 
  3. // 2、定义一些路由 
  4. const routes = [ 
  5.     // 每个路由都需要映射到一个组件 
  6. //3、创建路由实例 
  7. const router = createRouter({ 
  8.   routes, 
  9.   history:createWebHashHistory("./"
  10. }) 
  11.  
  12. export default router 

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

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3. import router from "./router/index" 
  4.  
  5. createApp(App) 
  6. //整个应用支持路由 
  7. .use(router) 
  8. .mount('#app'

2.2、新建组件配置路由

在 src 目录下,新建 pages 文件夹,新建 index.vue 文件:

  1. <template> 
  2.  首页入口 
  3. </template> 

在 router.js 文件内,定义路由

  1. const routes = [ 
  2.  { 
  3.   path:"/"
  4.   component:()=>import("../pages/index.vue"
  5.  } 

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

  1. <template> 
  2.   <img alt="Vue logo" src="./assets/logo.png" /> 
  3.   <router-view></router-view
  4. </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 。

  1. <template> 
  2.  <div> 
  3.   <input type="text" v-model="msg" /> 
  4.  </div> 
  5. </template> 
  6.  
  7. <script> 
  8. export default { 
  9.  setup() { 
  10.   const msg = '前端人,前端魂' 
  11.   return { 
  12.    msg, 
  13.   } 
  14.  } 
  15. </script> 

3.2、响应式数据

上述的实例中中,如果我们在 template 内,打印 msg 的时候,就会发现响应式失效。

  1. <template> 
  2.  <div> 
  3.   <input type="text" v-model="msg" /> 
  4.   {{ msg }} 
  5.  </div> 
  6. </template> 

是因为在 setup 内地自定义属性不具备响应式能力。vue3 的响应式原理是 通过底层代理 proxy 将数据包装一下,使得具有响应式。vue3 的响应式原理详情可查看《vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能?》

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

  1. <script> 
  2. import { ref } from 'vue' 
  3. export default { 
  4.  setup() { 
  5.   const msg = ref('前端人,前端魂'
  6.   return { 
  7.    msg, 
  8.   } 
  9.  } 
  10. </script> 

此时在 input 或在 setup 内改变 msg 的值,如:

  1. <script> 
  2. import { ref } from 'vue' 
  3. export default { 
  4.  setup() { 
  5.   const msg = ref('前端人,前端魂'
  6.   setTimeout(()=>{ 
  7.    msg.value = "我是前端人" 
  8.   },3000) 
  9.   return { 
  10.    msg, 
  11.   } 
  12.  } 
  13. </script> 

此时无论如何修改 msg 都会保证实时响应。

与 ref 类似的还有 reactive 。ref 是让基础数据类型具有响应式,reactive 是让引用数据类型具有响应式。

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

一个项目中,导航选项卡是很常见的,在 App.vue 文件内,加入两个导航:

  1. <template> 
  2.  <router-view></router-view
  3.  <router-link to="/">首页</router-link> 
  4.  <router-link to="/my">我的</router-link> 
  5. </template> 

如果把上述路由跳转方式修改成 push 时,如何修改呢?

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

如:

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

router 是路由【导航对象】。

想要获取当前路由时,使用 useRoute 方法,如:

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

 route 是当前激活的路由状态信息对象,包含所有路由中的参数,params, query 都属于它。

修改上边路由跳转方式使用 push ,代码如下:

  1. <script > 
  2. import { useRouter } from 'vue-router' 
  3. export default
  4.  setup(){ 
  5.   const router = useRouter() 
  6.   function go() { 
  7.    router.push({ path: '/my' }) 
  8.   } 
  9.   return
  10.    go 
  11.   } 
  12.  } 
  13. </script> 
  14.  
  15. <template> 
  16.  <router-view></router-view
  17.  <router-link to="/">首页</router-link> 
  18.  <button @click="go">我的</button> 
  19. </template> 

路由传参以及参数获取,只需要把之前的 this.$router 换成 router 就可以啦。

四、vuex 4

vuex 是专为 vue.js 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

在 vue3 中使用的是 vuex4 。vuex4 提供了和 vuex3 相同的 API 。

安装:

  1. npm install vuex@next 

package.json 检查版本

  1. "dependencies": { 
  2.  "vue""^3.2.25"
  3.  "vue-router""^4.0.12"
  4.  "vuex""^4.0.2" 

4.1、引入 vuex 状态管理

vuex4 创建 store 实例时,使用 createStore 函数创建,createStore 在使用之前需要先引入。

在 src 目录下,新建 store 文件夹下建 index.js :

  1. import { createStore } from "vuex" 
  2.  
  3. // 创建新的 store 实例 
  4. const store = createStore({ 
  5.  state: { 
  6.   name:'前端人' 
  7.  }, 
  8.  getters: { }, 
  9.  mutations: { }, 
  10.  actions: { }, 
  11.  modules: { } 
  12. }) 
  13.  
  14. export default store 

 在 main.js 中将 store 实例作为插件安装。

  1. import { createApp } from 'vue' 
  2. import App from './App.vue' 
  3. import router from "./router/index" 
  4. import store from "./store/index" 
  5.  
  6. createApp(App).use(router).use(store).mount('#app'

4.2、获取状态信息

在 App.js 文件内,使用状态信息,这与 vuex3 使用方式相同。

  1. <template> 
  2.  获取 state 内的状态信息 
  3.  {{ this.$store.state }} 
  4.  获取 getters 内的属性 
  5.  {{ this.$store.getters.getName }} 
  6. </template> 

五、vuex 结合 composition API

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

  1. <script> 
  2. import { useStore } from 'vuex' 
  3. export default { 
  4.  setup() { 
  5.   const store = useStore() 
  6.   console.log('store', store.state.name
  7.  }, 
  8. </script> 

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

5.1、操作 vuex 状态信息

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

示例1:mutations 内方法修改 name 的值。

  1. // 在 index.js 内 
  2. mutations: { 
  3.  changeName(state,data) { 
  4.    //data 是传入要修改的值 
  5.   state.name = data 
  6.  } 
  7.  
  8. //App.vue 内 
  9. <script> 
  10. import { useStore } from 'vuex' 
  11. export default { 
  12.  setup() { 
  13.   const store = useStore() 
  14.   console.log('store', store.state.name
  15.   store.commit('changeName''我是前端人'
  16.   console.log('store', store.state.name
  17.  } 
  18. </script> 

 示例1:actions 内方法修改 name 的值。

actions 内的方法是没有办法直接操作 state 的状态信息,只有 mutations 内的方法才可以,所以需要调用 mutations 的方法,实现修改 。

index.js 代码

  1. import { createStore } from "vuex" 
  2.  
  3. const store = createStore({ 
  4.  state: { 
  5.   name:'前端人' 
  6.  }, 
  7.  getters: { 
  8.   getName(state) { 
  9.    return state.name 
  10.   } 
  11.  }, 
  12.  mutations: { 
  13.   changeName(state,data) { 
  14.    state.name = data 
  15.   } 
  16.  }, 
  17.  actions: { 
  18.   changeVal(state) { 
  19.     // 借用setTimeout 模拟异步操作 
  20.    setTimeout(() => { 
  21.     state.commit('changeName','我是前端人'
  22.    },2000) 
  23.   } 
  24.  }, 
  25.  modules:{} 
  26. }) 
  27. export default store 

App.vue 代码

  1. <script> 
  2. import { useStore } from 'vuex' 
  3. export default { 
  4.  setup() { 
  5.   const store = useStore() 
  6.   store.dispatch('changeVal'
  7.  } 
  8. </script> 
  9. <template> 
  10.  {{ this.$store.state.name }} 
  11.  {{ this.$store.getters.getName }} 
  12. </template> 

 

责任编辑:姜华 来源: 今日头条
相关推荐

2022-07-15 08:45:07

slotVue3

2022-06-15 11:51:14

Vue3开发避坑

2021-03-30 07:11:22

Vue3parcel-vue-工具

2022-10-30 17:33:58

前端图形学vue3

2021-06-30 07:51:09

新项目领域建模

2022-01-21 09:06:13

Vue3版本兼容版本

2022-11-28 17:21:24

2021-11-26 05:59:31

Vue3 插件Vue应用

2022-11-18 08:32:02

Vue3.0开源项目

2024-03-29 09:07:15

Vue3.0开源项目

2024-07-04 08:56:35

Vue3项目Pinia

2021-08-23 13:25:25

Vue3CSS前端

2021-01-20 14:25:53

Vue3CSS前端

2022-03-24 20:42:19

Vue3API 设计Vue

2021-12-01 08:11:44

Vue3 插件Vue应用

2022-12-09 09:39:20

Vue3Vue2

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-11-29 14:18:05

Nuxt3静态Nuxt2

2020-09-19 21:15:26

Composition
点赞
收藏

51CTO技术栈公众号