Vite构建项目：Vue3 + Ts + Pinia + VueRouter + AntDesignVue

本文参考：

Vite快速构建Vue项目

本文记录快速构建Vite+Vue3项目的过程，包含以下7个步骤，3-7项都是可选项，可以按个人需要进行配置，比如可以用vuex代替pinia，采用其他Vue组件代替AntDesignVue等。

1. 下载ts
2. 下载vite，构建项目
3. 配置alias
4. 添加VueRouter
5. 添加Pinia
6. 添加tailwindcss
7. 添加AntDesignVue

下载TS

通过npm install -g typescript全局安装ts，命令行输入tsc -v，输出相应版本，说明安装成功。

 ~ % tsc -v
Version 4.6.4

下载Vite

通过npm install vite -g全局安装vite。

通过vite创建vue项目：npm create vite [project-name]，选择Vue和TypeScript，然后就创建完成啦，

 % npm create vite test
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in path...

Done. Now run:

  cd test
  npm install
  npm run dev

可以根据提示分别执行cd test(打开项目目录), npm install（下载依赖）, npm run dev（本地运行），浏览器打开链接http://127.0.0.1:5174/就可以访问啦

% npm run dev

> [email protected] dev
> vite

开发模式
Port 5173 is in use, trying another one...

  VITE v4.4.9  ready in 627 ms

  ➜  Local:   http://127.0.0.1:5174/
  ➜  Network: use --host to expose
  ➜  press h to show help

配置别名alias

为了方便后续文件间的引入，先提前配置alias，这样我们就可以通过@引入文件, 当然这不是必要的，只是人本更偏好以@开头引入文件。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
// 添加别名
    alias: [
      {
        find: '@',
        replacement: '/src',
      },
      { find: 'views', replacement: '/src/views' },
      { find: 'components', replacement: '/src/components' },
    ]
  }
})

原来引入App.vue：import App from './App.vue'

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

更多vite.config.ts相关配置，可以参考：Vite配置｜官方中文文档

添加VueRouter

下载vue-router：npm install vue-router --save

在src目录下创建router目录，我们会将关于路由的逻辑都写在该目录下，

创建路由实例

// src/router/index.ts

import { createRouter, createWebHashHistory } from 'vue-router';
import routes  from './routes'
const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
});

export default router

其中routes是具体路由，我们仅在index.ts中常见路由实例，具体页面的路由我们放在src/router/routes/index.ts中：

// src/router/routes/index.ts
const routes = [
    {
        path: "/home",
        name: "Home",
        component: () => import("@/views/home.vue")
    },
]
export default routes;

接着我们在main.ts中引入路由实例：

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router/index'
createApp(App).use(router).mount('#app')

可以在App.vue中修改并测试

<router-link to="/home">Go to Home | </router-link>
<router-view></router-view>

添加Pinia

Pinia为Vue添加状态管理，之所以选择Pinia，是因为Pinia搭配 TypeScript 一起使用时有非常可靠的类型推断支持。

下载Pinia依赖：npm i pinia --save

1. 首先在main.ts中引入Pinia:

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

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

2. 接着创建store实例，此处以管理项目的明暗主题切换为例，用过useThemeStore管理当前主题

import { defineStore } from "pinia";
import {ThemeEnum} from "@/enum"

const useThemeStore = defineStore('theme',{
    state:()=>{
        return {
            theme: ThemeEnum.LIGHT
        }
    },
    getters:{
        getCurrentTheme(state):ThemeEnum{
            return state.theme
        }
    },
    actions:{
        setCurrentTheme(mode:ThemeEnum):void{
            this.theme = mode;
        }
    }
})
 export {useThemeStore}

3. 在页面中使用store：

//  xxx.vue
<script lang="ts" setup>
import { useThemeStore } from "@/stores/theme";
// 接收store中的getter和action
const { getCurrentTheme, setCurrentTheme } = useThemeStore();
// getter使用：
var theme = getCurrentTheme;
// 改变主题
setCurrentTheme(theme);
</script>

添加TailWindCSS

TailWindCSS是基于类的CSS框架，它提供了预定义类，可以快速构建页面布局和样式。

参考官方中文指南

添加AntDesignVue

参考：官方指南

下载AntDesignVue依赖：npm i --save ant-design-vue

和大多数组件一样，有两种引入组件方式：

1. 全局注册所有组件，每个页面直接使用即可，无需另外引入
2. 按需引入，即在每个页面按需引入组件，如：import { Button } from 'ant-design-vue'，好处是打包时会将你没用到的组件的依赖包代码丢弃，打包生成的代码小一些

全局注册组件

// main.ts
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');

按需引入

直接在具体vue文件中引入, 下面以登录表单为例：

// xxx.vue
<template>
      <Form>
        <FormItem> <Input placeholder="UserName" v-model="formData.username" /> </FormItem>
        <FormItem> <InputPassword visibilityToggle placeholder="Password" v-model="formData.password" /> </FormItem>
        <div class="flex flex-row justify-between">
          <FormItem><Checkbox class="" v-model:checked="remenberme">remember me</Checkbox></FormItem>
          <FormItem><Button type="link" @click="changeLoginState(LoginStateEnum['RESET_PASSWORD'])">Forget Password?</Button></FormItem>
        </div>
        <FormItem><Button type="primary" class="bg-[#1677ff]" block>Sign in</Button></FormItem>
        <div class="flex flex-row justify-around">
          <Button>Mobile sign in</Button>
          <Button>Qr code sign in</Button>
          <Button>Sign up</Button>
        </div>
      </Form>
</template>
<script lang="ts" setup>
import { Form, Input, Checkbox, Row, Col, Button } from "ant-design-vue";
const FormItem = Form.Item;
const InputPassword = Input.Password;
</script>

项目构建完成！