Vue3.0 使用教程

一、Vue3.0 环境搭建

Vite 需要 Node.js 版本 14.18+，16+。

使用 vite 创建 Vue(3.3.4)项目

安装yarn： npm install yarn -g
安装pnpm： npm install pnpm -g

# npm 6.x 
npm create vite@latest my-vue-app --template vue 

# npm 7+, extra double-dash is needed: 
npm create vite@latest my-vue-app -- --template vue 

# yarn 
yarn create vite my-vue-app --template vue 

# pnpm 
pnpm create vite my-vue-app --template vue

cd my-vue-app

yarn / npm install / pnpm install
yarn dev / npm run dev / pnpm run dev

安装 vue-router、vuex全家桶 (命令pnpm同npm)

yarn add vue-router@4 / npm install vue-router@4 

yarn add vuex@next --save / npm install vuex@next --save

安装 UI 组件库：在Vue3环境中，一定找支持 Vue3的组件库。

npm install element-plus --save / yarn add element-plus / pnpm install element-plus

// 支持按需引入
npm i -D unplugin-vue-components / yarn add unplugin-vue-components --dev 

支持 element-plus 组件按需引入

# vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver, ElementPlusResolver, VantResolver, } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({ 
        resolvers: [ 
            AntDesignVueResolver(),
            ElementPlusResolver(),
            VantResolver(),
        ],
    })
  ]
})

支持 Sass 样式语法

yarn add sass / npm i -D sass

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进行开发。
• 已经没有tag属性的，可以用custom和插槽实现自定义。
• 新增了"插槽"功能，极其强大，参见路由中的伪代码，它在实现和动画将变得更简单，还可以Suspense实现Loading。
• 新增了几个组合API：useRoute/useRouter/useLink。
• 查询vue-router(v3)和vue-router(v4)的变化：next.router.vuejs.org/zh/guide/mi…

在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>