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

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'