vue3+ts+antDesign+pinia+axios+svg简单基座配置过程

1. 基础

1.卸载老版本vue-cli：
yarn global remove vue-cli
2.卸载老版本vue：
yarn global remove vue
3.安装vue最新版本：
yarn global add vue@next
4.安装vue-cli最新版本：
yarn global add @vue/cli@next

2.安装

1. 使用vite安装vue

   (vite创建项目)
   这里也有更多的模版

   npm init vite@latest -- --template vue

   yarn create vite my-vue-app --template vue-ts

2. 安装 sass
   yarn add -D sass

3. 安装eslint
   npx eslint --init

4. 安装 vue-router
   yarn add vue-router@4

5. 安装 pinia
   yarn add pinia

6. 安装axios
   yarn add axios

7. 安装 antDesign
   yarn add ant-design-vue

   • main 入口文件中 添加样式
   • antD 使用 vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()],
    }),]
})

    ```
    
8. 安装 unplugin-vue-components
   - 安装该插件才可以按需加载 `yarn add unplugin-vue-components -D`


9. 配置alis
```javascript

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src")
    },
  },
  plugins: [
    vue(),
    Components({
      resolvers: [AntDesignVueResolver()],
    }),]
})

10. vue-router 简单配置

import * as VueRouter from "vue-router"

const Home = { template: '
Home
' }
const About = { template: '
About
' }

const routes = [
    
    { path: '/', redirect: '/demo' },
    { path: '/about', component: About },
    { path: '/login', component: import('@/pages/login/index.vue') },

    // 子路由 前面不能加/
    { 
        path: '/demo',
        component: import('@/pages/demo/index.vue'),
        redirect: '/demo/pinia',
        children: [
            { path: 'pinia', component: import('@/pages/demo/pinia.vue') },
    ]}
  ]

  // 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
export default  VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes// `routes: routes` 的缩写
  })

11. svg 配置 （有点恼火，但是成功了）

• 插件安装 yarn add -D vite-plugin-svg-icons
• 创建组件svgIcon文件

<template>
  <svg aria-hidden="true" class="svg-icon">
    <use :xlink:href="symbolId" :fill="color" />
  svg>
template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  prefix: { type: String, default: "icon" },
  iconClass: { type: String, required: true },
  color: { type: String, default: "" },
});

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  overflow: hidden;
  fill: currentColor;
}
style>

• 全局引入 main.ts

// 注册图标
import 'virtual:svg-icons-register';
import SvgIcon from '@/components/svgIcon/index.vue' // 引入组件,位置自己定

• vite 配置

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'

plugins: [
 createSvgIconsPlugin({
      // Specify the icon folder to be cached，这里配置svg存放的位置
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons/svg')],
      // Specify symbolId format
      symbolId: 'icon-[dir]-[name]'
    })]

• 引用 – 因为全局注册了这个组件，所以可以直接用

 <SvgIcon name="github" className="back">SvgIcon>