Vue3+Vite+TypeScript常用项目模块详解

以下是Vue3+Vite+TypeScript常用项目模块的详细说明和示例代码：

1. 路由模块（Vue Router）

Vue Router是Vue官方推荐的路由器，用于处理前端路由请求，实现单页应用（SPA）的核心功能。

项目中安装：

npm install [email protected]

路由模块的使用示例：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

createApp(App).use(router).mount('#app')

// Home.vue
<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

// About.vue
<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

在main.ts中，使用createRouter创建路由实例，然后在createApp中注册路由实例，最后将其挂载到指定的元素上。

2. 状态管理模块（Vuex）

Vuex是Vue官方推荐的状态管理模式和库，用于在Vue应用程序中集中管理状态。

项目中安装：

npm install [email protected]

状态管理模块的使用示例：

// store/index.ts
import { createStore } from 'vuex'

interface State {
  count: number
}

const store = createStore<State>({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

export default store

// App.vue
<template>
  <div class="app">
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'App',
  setup() {
    const store = useStore()

    const increment = () => {
      store.dispatch('increment')
    }

    return {
      count: store.getters.getCount,
      increment
    }
  }
})
</script>

在store/index.ts中，使用createStore创建状态实例，在App.vue中使用useStore获取状态实例，然后通过store.dispatch调用actions中的方法更新状态。

3. UI框架模块（Element Plus）

Element Plus是一套采用TypeScript开发的基于Vue 3.0的UI框架，用于快速构建界面。

项目中安装：

npm install [email protected]

UI框架模块的使用示例：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')

// App.vue
<template>
  <div class="app">
    <el-button @click="open">Open Dialog</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { ElDialog } from 'element-plus'

export default defineComponent({
  name: 'App',
  setup() {
    const open = () => {
      ElDialog({
        title: 'Dialog',
        message: 'This is a dialog message'
      })
    }

    return {
      open
    }
  }
})
</script>

在main.ts中，使用use注册Element Plus插件，在App.vue中直接使用Element Plus提供的组件。

4. HTTP模块（Axios）

Axios是一个基于Promise的HTTP库，用于浏览器和node.js的HTTP客户端，用于处理HTTP请求。

项目中安装：

npm install [email protected]

HTTP模块的使用示例：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000'

createApp(App).mount('#app')

// App.vue
<template>
  <div class="app">
    <el-button @click="fetchData">Fetch Data</el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import axios from 'axios'

export default defineComponent({
  name: 'App',
  setup() {
    const fetchData = async () => {
      const response = await axios.get('/data')
      console.log(response.data)
    }

    return {
      fetchData
    }
  }
})
</script>

在main.ts中，设置axios的默认请求地址，在App.vue中使用axios.get调用API获取数据。

5. 表单验证模块（VeeValidate）

VeeValidate是一个基于Vue.js 3.0的表单验证库，支持异步验证、自定义规则等功能，用于处理表单验证。

项目中安装：

npm install [email protected]

表单验证模块的使用示例：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createForm, Field, ErrorMessage, configure } from 'vee-validate'
import { required, email } from '@vee-validate/rules'

configure({
  validateOnInput: true,
  validateOnBlur: true
})

createForm({
  validateOnInput: true,
  validateOnBlur: true
})

createApp(App).component('Field', Field).component('ErrorMessage', ErrorMessage).mount('#app')

// App.vue
<template>
  <div class="app">
    <form @submit.prevent="submitForm">
      <label>Email</label>
      <Field type="email" name="email" :rules="[required, email]" />
      <ErrorMessage name="email" />

      <label>Password</label>
      <Field type="password" name="password" :rules="[required]" />
      <ErrorMessage name="password" />

      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useForm } from 'vee-validate'

export default defineComponent({
  name: 'App',
  setup() {
    const { handleSubmit } = useForm()

    const submitForm = handleSubmit((values) => {
      console.log(values)
    })

    return {
      submitForm
    }
  }
})
</script>

在main.ts中，使用createForm和configure创建表单实例，并将Field和ErrorMessage注册为全局组件，在App.vue中使用Field和ErrorMessage组件创建表单，并使用useForm获取表单实例，使用handleSubmit处理表单提交事件，并在Field组件的props中传入验证规则。

6. 打包构建模块（Rollup）

Rollup是一个JavaScript模块打包器，专门用于打包JavaScript库和工具，支持ES6模块、Tree-shaking等特性。

项目中安装：

npm install [email protected] [email protected] -D

打包构建模块的使用示例：

创建rollup.config.ts文件：

import typescript from 'rollup-plugin-typescript2'

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.esm.js',
      format: 'esm'
    },
    {
      file: 'dist/index.cjs.js',
      format: 'cjs'
    }
  ],
  plugins: [
    typescript({
      tsconfig: 'tsconfig.json'
    })
  ]
}

在package.json中添加打包命令：

"scripts": {
  "build": "rollup -c"
},

在src/index.ts中编写代码：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

使用命令行执行打包命令：

npm run build

打包后的文件将生成在dist目录下。

以上就是一个完整的Vue 3.0项目中使用常用模块的示例，这些模块可以帮助我们快速构建一个功能完善、易于维护的应用程序。当然，这只是冰山一角，还有很多其他优秀的模块可以使用，需要根据具体需求进行选择。