vite创建vue3+ts项目

为何选择vite：
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它做到了本地快速开发启动：

1，极速的服务启动，使用原生 ESM 文件，无需打包。

2，轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）

3，丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用。

 4，优化的构建，可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建

5，通用的插件，在开发和构建之间共享 Rollup-superset 插件接口。

6，完全类型化的API，灵活的 API 和完整 TypeScript 类型。

本文技术栈是vue3+vue-router+ts+vite+element-plus+pinia。

初始化项目
（1）在需要创建位置cmd目录下执行

npm init vite@latest

（2）项目名称

（3）选择Vue

（4）选择TS

2.项目创建成功后根据提示做下一步操作：

（1）cd到项目目录下；

（2）安装依赖；

（3）运行项目；

3. 初始配置：

（1）安装路由

运行命令

 npm install vue-router

创建router文件夹

index.ts中配置路由

import { createRouter, createWebHistory, RouteRecordRaw} from 'vue-router'
import { constantRouter} from './routers'

const routes: Array<RouteRecordRaw> = constantRouter;
const router = createRouter({
    history: createWebHistory(),
    routes,
    scrollBehavior() {
        return {
            left: 0,
            top: 0
        }
    }
})
export default router;

 routers.ts中配置

export const constantRouter = [
    {
        path: '/',
        name: 'Home',
        component: () => import("../components/HelloWorld.vue")
    }
]

main.ts中挂载路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'

const app = createApp(App)
// 挂载路由
app.use(router)
app.mount('#app')

修改App.vue

<script setup lang="ts">

</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

（2）安装element-plus

 npm install element-plus

按需引入配置

npm install -D unplugin-vue-components unplugin-auto-import

修改vite.config.ts文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

引入element-Plus图标

npm install @element-plus/icons-vue

 配置main.ts文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
// 引入element-plus图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
// 挂载路由
app.use(router)
app.mount('#app')

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

使用

此时 页面上可正常显示按钮及图标。

（3）安装pinia

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

npm install pinia

安装 pinia-plugin-persist，状态

npm install pinia-plugin-persist