vue3.x+ts项目创建，配置流程

一、创建项目 、安装组件库

1、创建vue3.x项目

npm init vue@latest

2、项目中安装 element-plus

# NPM
npm install element-plus --save
 
# Yarn
yarn add element-plus
 
# pnpm
pnpm install element-plus

3 、在mian.ts中引入并配置element-plus（完整引入）element-plus连接

import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";
 
import "./assets/main.css";
 
const app = createApp(App);
 
app.use(createPinia());
app.use(router);
 
app.use(ElementPlus);
 
app.mount("#app");

5、在组件中直接使用 element组件即可

<template>
  <el-row class="mb-4">
    <el-button>Defaultel-button>
    <el-button type="primary">Primaryel-button>
    <el-button type="success">Successel-button>
    <el-button type="info">Infoel-button>
    <el-button type="warning">Warningel-button>
    <el-button type="danger">Dangerel-button>
    <el-button>中文el-button>
  el-row>
template>
<script lang="ts" setup>
script>

二、安装自动导入插件

vue3中使用ref、reactive、生命周期函数等需要手动导入才可以使用，安装插件去做自动导入

import { nextTick, onMounted, reactive, ref } from "vue";
let bool = ref(false)

1、安装插件unplugin-auto-import

npm i -D unplugin-auto-import

2、在vite.config.ts中配置 

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from '@vitejs/plugin-vue-jsx';
// 引入自动导入插件
import AutoImport from 'unplugin-auto-import/vite'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //配置jsx
    vueJsx(),
    // 配置自动导入，dts配置需要重新运行才可以在src中生成auto-import.d.ts文件
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-import.d.ts'
    })
  ],
  server: {
    host: "0.0.0.0",
    port: 8088,
  },
});

注意：配置dts后需要重新运行 npm run dev 才可以生成auto-import.d.ts 文件

三、安装状态管理pinia，如何创建项目时候选择安装pinia的话可以忽略此步骤

1、安装pinia

npm install pinia

2、main.ts中引用

import { createApp } from "vue";
import { createPinia } from "pinia";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";
import router from "./router";
 
import "./assets/main.css";
 
const app = createApp(App);
 
app.use(createPinia());
app.use(router);
 
app.use(ElementPlus);
 
app.mount("#app");

3、项目src下创建文件stores/counter.ts

import { defineStore } from 'pinia'
 
//counter  为id
export const useCounterStore = defineStore('counter', {
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

或者这样写    name 名称 也是id，是必要的 Pania 使用它来将商店连接到 devtools。将返回的函数命名为use...是可组合项之间的约定，以使其使用习惯。

import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})

4、在组件中使用

<template>
  <h1 @click="cahnge">{{ useCounter.counter }}h1>
template>
<script lang="ts" setup>
import { useCounterStore } from "../stores/counter"
const useCounter = useCounterStore()
const cahnge = () => {
  useCounter.increment()
}
useCounter.$subscribe((args, state) => {
  console.log("store", args, state)
})
script>

5、状态管理做持久化处理，简单的可以直接用locaStorage存储，或者写个插件可以查看之前的一篇文章

cocos2d-x 3.6创建项目代码

zip 0星 超过10%的资源 207KB

下载

四、安装全局事件发布订阅mitt

在vue2 中我们可以创建一个新的 const eventbus = new Vue() 实例去做事件广播，但是在vue3.x中不允许我们这样做，我们可以使用插件mitt实现

1、安装mitt

npm install mitt -S

2、在 main.ts 中 全局引用

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset.css'
import mitt from 'mitt'
const Mit = mitt()
const Vue = createApp(App)
// 全局声明 获取mitt所有的类型
declare module 'vue' {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit
  }
}
//全局挂载
Vue.config.globalProperties.$Bus = Mit
Vue.mount('#app')

3、组件中使用

A.vue  发布事件

<template>
  <div class="header">
    <button @click="sendEmit">派发事件button>
  div>
template>
 
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
 
let instance = getCurrentInstance()
 
let sendEmit = () => {
  instance?.proxy?.$Bus.emit('on-paifa', 'mitt 全局广播事件')
 
}
script>
 
<style lang="less" scoped>
 
style>

B.vue 订阅事件

<template>
  <div class="b-div">
    <h1>我是BBBBB组件h1>
    <h5 style="color: #fff;">{{ name }}h5>
  
  div>
template>
 
<script setup lang="ts">
import { getCurrentInstance, inject, Ref, ref } from "vue";
 
let instace = getCurrentInstance()
instace?.proxy?.$Bus.on("on-a", (res: any) => {
  name.value = res
  console.log("res", res)
})
script>
 
<style scoped>
 
style>

派发多个事件

import { getCurrentInstance } from 'vue';
 
 
let instance = getCurrentInstance()
 
let sendEmit = () => {
  instance?.proxy?.$Bus.emit('on-paifa', 'mitt 全局广播事件')
  instance?.proxy?.$Bus.emit('on-a', 'mitt 全局广播事件AAAA')
 
  instance?.proxy?.$Bus.emit('on-b', 'mitt 全局广播事件BBBB')
 
}

订阅多个

import { getCurrentInstance } from 'vue';
 
 
let instance = getCurrentInstance()
 
//type 事件名称  res传参
 instance?.proxy?.$Bus.on('*', (type: any, res: any): void => {
  console.log("mitt派发======", type, res)
})

create_project_py.bat

bat 5星 超过95%的资源 313.0B

下载

卸载监听 $Bus.off('事件名称', fun())

let fun = (res: any) => {
  console.log("mitt派发======", res)
  tname.value = res
 
}
 
instace?.proxy?.$Bus.on('on-paifa', fun)
 
setTimeout(() => {
  // 卸载监听
 instace?.proxy?.$Bus.off('on-paifa', fun)
}, 2000)

卸载全部监听

// 卸载全部监听
instace?.proxy?.$Bus.all.clear()

 全局挂载方法

Vue.config.globalProperties.$Bus = Mit

获取全局方法（多种）

具体可以参考这篇博客

五、路由方面：路由全局守卫、动态路由等

项目中使用vue-router@4.x 可以参考之前写的文档

1、router跳转传参/嵌套路由/路由重定向/别名https://blog.csdn.net/csl125/article/details/125862159?spm=1001.2014.3001.5501

2、前置守卫、后置守卫、路由元信息、过渡动效、滚动行为https://blog.csdn.net/csl125/article/details/125958252?spm=1001.2014.3001.5501

3、 动态路由https://blog.csdn.net/csl125/article/details/125960809?spm=1001.2014.3001.5501