Vue3.0 完全教程#1

lovelilt

一、Vue3.0 开发环境搭建

• 使用 vite 创建 Vue(3.2.30)项目
• 
  

npm install yarn -g
yarn create vite vue3-project --template vue
cd vue3-project // 进入项目根目录
yarn // 安装依赖包
yarn dev // 启动本地服务

• 安装 vue-router、vuex全家桶
  

yarn add vue-router@latest // v4.0.14
yarn add vuex@latest // v4.0.2

• 安装 UI 组件库：在Vue3环境中，一定找支持 Vue3的组件库，那些 Vue2的组件库是无法使用的。
  

yarn add ant-design-vue@next // v2.2.8
yarn add vite-plugin-components --dev // 支持ant-design-vue按需引入

• 支持 ant-design-vue 组件按需引入
  

# vite.config.ts


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ViteComponents({
      customComponentResolvers: [AntDesignVueResolver()],
    })

})

• 支持 Sass 样式语法
  

yarn add sass // v1.49.9

1、入口文件 main.js

import { createApp } from 'vue'
import router from './router.ts'
import store from './store'
import App from './App.vue'
// 导入UI样式表
import "ant-design-vue/dist/antd.css"


const app = createApp(App)
// 配置全局属性（这里不能再使用Vue.prototype了）
app.config.globalProperties.$http = ''


app.use(router) // 注册路由系统
app.use(store) // 注册状态管理
// 全局指令
app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})
app.mount('#app') // 挂载

2、Vue-Router (v4) 详解

• 注意：在vue3环境中，必须要使用vue-router(v4)
• 创建router，使用createRouter()
• 指定路由模式，使用history属性：createWebHashHistory/createWebHistory()
• 路由注册，在mian.js中 app.use(router)
• 如果当前项目严格使用组合式API进行开发，必须使用 useRoute、userRouter等Hooks API进行开发。
• <router-link>已经没有tag属性的，可以用custom和插槽实现自定义。
• <router-view>新增了"插槽"功能，极其强大，参见路由中的伪代码，它在实现<keep-alive>和<transition>动画将变得更简单，还可以Suspense实现Loading。
• 新增了几个组合API：useRoute/useRouter/useLink。
• 查询vue-router(v3)和vue-router(v4)的变化：https://next.router.vuejs.org/zh/guide/migration/index.html
  

在Vue3环境中编写路由配置，参考代码如下：

import { createRouter, createWebHashHistory } from 'vue-router'


const Home = () => import('@/pages/study/Home.vue')
const Find = () => import('@/pages/study/Find.vue')
const User = () => import('@/pages/study/User.vue')
const Cnode = () => import('@/pages/cnode/index.vue')


export default createRouter({
  history: createWebHashHistory(), // Hash路由
  routes: [
    {
      path: '/home',
      component: Home,
      meta:{transition: 'fade', isAlive: true }
    },
    { path: '/find', component: Find },
    { path: '/user', component: User },
    { path: '/cnode', component: Cnode }
  ]
})

3、Vuex 根store 代码示例

• 版本：在vue3环境中，必须要使用 vuex(4)
• 注意：在组件中使用 vuex数据时，哪怕是在setup中，也要使用 computed 来访问状态管理中的数据，否则数据不响应。
  

在Vue3环境中编写 Vuex代码示例如下：

# src/store/index.ts


import { createStore } from 'vuex'
import cnode from './modules/cnode'


export default createStore({
  getters: {},
  modules: { cnode }
})

4、Vuex 子store 代码示例

# src/store/modules/cnode.ts


import { fetchList } from '@/utils/api'
export default {
  namespaced: true,  state: {
    msg: 'cnode',
    list: [],
    cates: [
      { id: 1, tab: '', label: '全部' },
      { id: 2, tab: 'good', label: '精华' },
      { id: 3, tab: 'share', label: '分享' },
      { id: 4, tab: 'ask', label: '问答' },
      { id: 5, tab: 'job', label: '招聘' }
    ]
  },
  mutations: {
    updateList (state, payload) {
      state.list = payload
    }
  },
  actions: {
    getList ({commit}, params) {
      fetchList(params).then(list=>{
        console.log('文章列表', list)
        commit('updateList', list)
      })
    }
  }
}

5、App 根组件代码示例

<template>
  <!-- 路由菜单 -->
  <router-link to='/home'>首页</router-link>
  <router-link to='/find'>发现</router-link>
  <router-link to='/user'>我们</router-link>
  <!-- 视图容器 -->
  <router-view />
</template>


<script setup></script>
<style lang='scss'>
  html, body { padding:0; margin:0; }
</style>


<style lang='scss' scoped>
  a { display:inline-block; padding:5px 15px; }
</style>