Vue3+TS+Ant Design Vue + Sass + Vite 练习项目 痞皮博客

今天的砖搬完了，水泥也擦好了，喝茶学习一下。
Vue3、TypeScript、Ant、Vite 这些都是第一次用，也是边看文档边写（有不足请指出，其他自行百度\叉腰.jpg) 。

芜湖，最近看到了脚手架npm init vue@next 老铁们这个直接一键安装，不用看下面那些废话了

安装

通过vite安装 npm init vite@latest <project-name> -- --template vue

Select a framework: » vue
√ Select a variant: » vue-ts

安装项目包 npm install

安装相关插件

Ant Design of Vue(组件库)

npm install ant-design-vue@next -S

Sass(CSS预处理器)

npm install sass -D

unplugin-vue-components(实现组件按需引入）

npm install unplugin-vue-components -D

原名为vite-plugin-components，更新后更名为unplugin-vue-components

npm地址：https://www.npmjs.com/package/unplugin-vue-components

unplugin-vue-components按需引入

// vite.config.ts
/* ... */
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

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

vite-plugin-components 按需引入(Ant Design of Vue文档介绍的方法)

// vite.config.js
/* ... */
import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components';

export default {
  plugins: [
    /* ... */
    ViteComponents({
      customComponentResolvers: [AntDesignVueResolver()],
    }),
  ],
};

配置完成后默认在src/components文件夹下的组件都可自动引入了，同时ant组件可以直接使用了

// App.vue
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from './components/HelloWorld.vue' // 未使用插件时需要引入组件,使用插件后已经默认引用所以可以删去了
</script>

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <a-button>我是ant按钮</a-button>
  </div>
  <div class="tip">sass真好用</div>
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
<style lang="scss" scoped>
$danger: red;
.test-sass {
  color: $danger;
}
</style>

// 修改
// vite.config.ts
/* ... */
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    /* ... */
    Components({
      dirs: ['src/components'], // 可以将需要自动引入的文件所在文件夹加入数组内,路径为项目根目录下相对路径
      /* ... */
    }),
  ],
})

vite-plugin-style-import (样式按需引入)

npm install vite-plugin-style-import -D

// vite.config.js
/* ... */
import { defineConfig } from 'vite'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    /* ... */
    styleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: name => {
            return `ant-design-vue/es/${name}/style/index`
          },
        },
      ],
    }),
  ],
  
})

配置文件

resolve.alias 路径别名

类型： Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

// vite.config.js
/* ... */
import { defineConfig } from 'vite'
import path from 'path' // path需要安装@types/node包  npm i @types/node -D

export default defineConfig({
  /* ... */
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
    ],
  },
})

//tsconfig.json
{
  "compilerOptions": {
  	/* ... */
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    /* ... */
    "skipLibCheck": true // 这一句用于解决build打包报错
  }
  /* ... */
}

开发服务器选项

// vite.config.js
/* ... */
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  /* ... */
  server: {
    host: '127.0.0.1', // 本地服务器地址
    port: 3000, // 暴露端口
    open: true, // 启动时是否自动打开浏览器
  },
})

进入项目,运行npm run dev
完事