vite创建vue3+ts+ant design vue项目

1.通过vite命令构建vue3+ts项目

npm init @vitejs/app
or
yarn create @vitejs/app

根据步骤选择

1. 项目名称
2. 框架（vue,react…）
3. js或ts
   
   vite官网

2.安装ant design vue

安装2.x版本

 npm i --save ant-design-vue@next  

ant design vue 官网

按需加载

vite按需加载需要引入插件

npm i vite-plugin-style-import -S  

在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    })],
})

在App.vue文件中试用一下

<template>
  <Button>测试</Button>
</template>

<script setup>
// <script setup>实验性vue语法,简化了操作，
//其实 script setup 就相当于在编译运行是把代码放到了 setup 函数中运行
// 然后把导出的变量定义到上下文中，并包含在返回的对象中。
// 所以我这里可以直接使用了，如果在vue2.x中还要在compoents中注册一下
import { Button } from "ant-design-vue";
</script>

效果

3.安装Vuex

npm install vuex@next -S  

在src目录下创建store文件夹
在store文件夹下创建index.ts文件和modules文件夹

index.ts配置内容

import { createStore } from 'vuex'

// 获取modules文件夹下所有ts文件
const files: any = import.meta.globEager("./modules/*.ts")
let modules: any = {}
Object.keys(files).forEach((key) => {
  // 将获取到结果按照 key:value 的形式存放到modules对象中
  modules[key.replace(/(\.\/|\modules\/|\.ts)/g, '')] = files[key].default
})
console.log('模块',modules)
export default createStore({
  modules
})

modules/user.ts

export default {
  state: () => ({
    userInfo: 'sbafff'
  })
}

在main.ts中挂在

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

在控制台中打印的结果

4.安装vue-router

先配置vite中对src的别名@，完成后就可以用@访问src下的内容
在vite.config.ts中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [{
        libraryName: 'ant-design-vue',
        esModule: true,
        resolveStyle: (name) => {
          return `ant-design-vue/es/${name}/style/css`;
        },
      }]
    })],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    }
  }
})

// 上面可能会遇到
// __dirname 和 path 显示红色的波浪线需要安装插件
npm i @types/node -S   

安装vue-router

npm i vue-router@next -S   

router/index.ts

import { createRouter, createWebHistory } from "vue-router";
import Layout from '@/layouts/index.vue'
import Test from '@/views/index/test.vue'
import Index from '@/views/index/index.vue'
// 路由信息
const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
  },
  {
    path: "/test",
    name: "test",
    component: Test,
  },
];

// 导出路由
const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在main.ts中挂在

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

效果


待续。。。