程序员经验分享-hwhale

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

2023-05-16

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

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>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-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存储，或者写个插件可以查看之前的一篇文章

四、安装全局事件发布订阅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)
})

卸载监听 $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

获取全局方法（多种）

<script setup lang="ts">
import { getCurrentInstance, inject, Ref, ref } from "vue";
 
//第一种
let instace = getCurrentInstance()
instace?.proxy?.$Bus.on()
 
//第二种
let { appContext: { config: { globalProperties: $global } } } = getCurrentInstance() as any
 
$global.$Bus.on()
console.log("aaaa", $global)
 
//第三种
let { proxy } = getCurrentInstance() as any
proxy.$Bus.on()
 
</script>

具体可以参考这篇博客

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

项目中使用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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue3

项目创建

配置流程

vue3.x+ts项目创建，配置流程 的相关文章

  • vue3中的Suspense组件

    用法 插槽名字固定 形成一个异步组件 比如这边 如果我们像之前那样进行静态引入的话 比如 child组件迟迟没有加载完毕 那么整个app vue组件也不会出现 而是要等到child加载完毕了之后再一起出现 而使用了defineAsyncCo

  • vue3 hooks的简单使用 组合式函数

    想当于vue2的mixins 我们可以使用hooks代替mixins 官方文档 组合式函数 hooks 特点 vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入 不同在于 hooks 是函数 vue3 中的 hook

  • Vue3 路由页面切换动画 animate.css

    animate css官网 可以通过以下的内容 来获取自己想要的动态切换样式 1 路由动画transition或者在组件中控制使用animate 安装 npm install animate css 在main ts中引入 import a

  • vue3+vite的项目中实现右键事件的神器

    前言 vue3 vite的项目中实现右键事件的神器 imengyu vue3 context menu 实现效果 使用步骤 1 安装 npm cnpm pnpm yarn 都可以 装上下面插件 imengyu vue3 context me

  • Vue常用的修饰符有哪些？分别有什么应用场景？

    一 修饰符是什么 在程序世界里 修饰符是用于限定类型以及类型成员的声明的一种符号 在Vue中 修饰符处理了许多DOM事件的细节 让我们不再需要花大量的时间去处理这些烦恼的事情 而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种

  • Vue3的fragment

    vue2时 组件的模板结构中出现多个标签时 需要使用根标签 vue3时 组件的模板结构中出现多个标签时 可以不用根标签 这是因为vue3会自动将多个标签用fragment包裹 举个例子 main js import createApp fr

  • vue3+vite中使用path-to-regexp以及相关的报错问题

    前言 path to regexp 该方法的作用是把字符串转为正则表达式 一般我们使用动态匹配路由的时候会用到这个 1 介绍path to regexp 更多点我查看 pathToRegexp pathToRegexp foo bar 打印

  • Vue3全网最细介绍使用

    文章目录 一 Vue3介绍 二 Vue3项目创建 三 Setup 四 ref与reactive 五 setup context 六 计算属性 七 监听属性 八 Vue3生命周期 九 自定义hook函数 十 toRef 一 Vue3介绍 1

  • vue3知识点：setup

    文章目录 二 常用 Composition API 1 拉开序幕的setup setup的两个注意点 本人其他相关文章链接 二 常用 Composition API 问题 啥叫 组合式API 答案 请看官方文档 https v3 cn vu

  • Vue实例挂载的过程

    一 思考与分析 我们都听过知其然知其所以然这句话 那么不知道是否思考过new Vue 这个过程中究竟做了些什么 过程中是如何完成数据的绑定 又是如何将数据渲染到视图的等等 首先找到vue的构造函数 源码位置 src core instanc

  • vue3知识点：Suspense组件

    文章目录 五 新的组件 3 Suspense 案例 完整代码 本人其他相关文章链接 五 新的组件 3 Suspense 等待异步组件时渲染一些额外内容 让应用有更好的用户体验 使用步骤 第1步 异步引入组件 import defineAsy

  • vue3-实现父子组件之间的通信（详解+源码）

    前言 vue3相对于vue2的父子传参方式有所改变 本文介绍三种 父组件给子组件传参 父组件调用子组件内的方法 子组件调用父组件的方法 如果不需要一种一种看可以直接下滑看全部代码 有注释也蛮好理解 一 父组件给子组件传参 1 父组件给子组件

  • vue3中实现音频播放器APlayer

    前言 vue2的时候 分享了一个很好用的插件是vue aplayer 但是他是不支持vue3的 这里分享vue3使用APlayer来实现一个播放器的方法 实现效果 官方 git地址 点我 api地址 点我 实现步骤 1 安装 npm npm

  • vue3中的readonly

    接受一个对象 不论是响应式还是普通的 或是一个 ref 返回一个原值的只读代理 只读代理是深层的 对任何嵌套属性的访问都将是只读的 它的 ref 解包行为与 reactive 相同 但解包得到的值是只读的 类型 function reado

  • Vue3状态管理库Pinia——核心概念（Store、State、Getter、Action）

    个人简介 个人主页 前端杂货铺 学习方向 主攻前端方向 正逐渐往全干发展 个人状态 研发工程师 现效力于中国工业软件事业 人生格言 积跬步至千里 积小流成江海 推荐学习 前端面试宝典 Vue2 Vue3 Vue2 3项目实战 Node js

  • vue3 通过自定义指令在table中滚动加载数据

    1 在utils文件中新建一个loadMore ts文件 import type Directive App from vue const debounce function func any delay any let timer any

  • Vue.observable的理解

    一 Observable 是什么 Observable 翻译过来我们可以理解成可观察的 先来看其在Vue中的定义 Vue observable 让一个对象变成响应式数据 Vue 内部会用它来处理 data 函数返回的对象 返回的对象可以直接

  • 【Vue3】在Vue3中使用reactive定义的响应式失效

    Vue3 在Vue3中使用reactive定义的响应式失效 文章目录 Vue3 在Vue3中使用reactive定义的响应式失效 Vue3 在Vue3中使用reactive定义的响应式失效 后面查出原因 解决办法 总结 Vue3 在Vue3

  • 【vue3练习 -12】vue3使用readonly(),shallowReadonly()

    作用 把一个响应式 可以是ref定义的 也可以是reactive定义的 的数据变成只读的 不可以修改 使用场景 假如你的组件有个数据 但是你不希望在使用的时候修改他就可以把他变成只读的 用法示例 import readonly shallo

  • vue3 父传参到子（defineProps），父调子方法（defineExpose）

    父页面

随机推荐

热门标签