一.创建项目

npm init @vitejs/app

二.vue-router

npm install vue-router

src下创建文件夹

1、在route.ts文件夹中定义静态路由

目的：为后续免登录页面做准备（注：此时/@/会报错，后续有解决方案）

import {RouteRecordRaw} from "vue-router";

export const staticRoutes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'login',
        component: () => import("/@/views/login/index.vue"),
        meta: {
            title: '登录',
        },
    }
]

2、在index.ts中导出路由

import {staticRoutes} from "./route";
import {createRouter, createWebHashHistory} from "vue-router";


export const router = createRouter({
    history: createWebHashHistory(),
    routes: staticRoutes,
});


export default router

3.main.ts添加路由

import {createApp} from 'vue'
import App from './App.vue'
import router from "/@/router"

const app = createApp(App);
app.use(router)
app.mount('#app')

4.App.vue使用路由

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

解决/@/报错

yarn add @type/node

在vite.config.js中做修改

import { defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

const pathResolve = (dir: string): any => {  //新增内容
    return resolve(__dirname, '.', dir);
};

const alias: Record<string, string> = {  //新增内容
    '/@': pathResolve('./src/'),
    'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js',
};

const viteConfig = defineConfig(() => {  //修改内容
    return {
        plugins: [vue()],
        resolve:{
            alias
        }
    }
})

export default viteConfig

若ts报错则修改内容path

...
"paths": {
  "/@/*": [
    "src/*"
  ]
}
...

三、element plus

1、安装element plus

yarn add element-plus --save

这里简单介绍按需导入流程，官网写的很详细（完整导入和手动导入可以参照官网element-plus.gitee.io/zh-CN/guide…

首先安装 unplugin-vue-components、unplugin-auto-import插件

yarn add -D unplugin-vue-components unplugin-auto-import

然后在vite.config.ts中做配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

四、Pinia

Pinia 有如下特点：

完整的 typescript 的支持；
足够轻量，压缩后的体积只有1.6kb;
去除 mutations，只有 state，getters，actions（这是我最喜欢的一个特点）；
actions 支持同步和异步；
没有模块嵌套，只有 store 的概念，store 之间可以自由使用，更好的代码分割；
无需手动添加 store，store 一旦创建便会自动添加；

yarn add pinia --save

1、新建 src/store 目录并在其下面创建 index.ts

 import { createPinia } from 'pinia'

 const store = createPinia()

 export default store

2、在 main.ts 中引入并使用

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

const app = createApp(App) 
app.use(store)
app.mount('#app');

3、定义State，在src/store下创建user.ts

import { defineStore } from 'pinia'

export const userStore = defineStore({ id: 'user',
state: () => { return { name: 'zs' } }, actions: { updateName(name:string) { this.name = name } } })

4、使用

 <template>
   <div>{{ userStore.name }}</div>
 </template>

 <script lang="ts" setup>
 import { useUserStore } from '@/store/user'

 const userStore = useUserStore()
// 修改state
userStore.updateName('张三')
 </script>

vue3+vite+vue-router+element plus+pinia配置（一）