一、准备

1.node版本

要求：node版本 >=12.0.0

• 查看node版本

nvm list

• 切换node版本

nvm use <version>

2.查看vue-cli版本

vue --version

3.安装typescript

npm install -g typescript
// 查看版本
npm view typescript version

二、安装

// 安装 Vite
npm init vite@latest
// 利用 Vite 安装 Vue3.0 项目 选择vue-ts模板
npm init vite@latest my-vue-app -- --template vue-ts
// 进入工程项目文件夹
cd projectName
// 安装项目依赖
npm install
// 运行项目
npm run dev

完成：

三、其他安装

• Vue Router 4.x

npm install vue-router@4

• 组件库：Ant Design of Vue

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

按需加载：
ps：由于 vite 本身已按需导入了组件库，因此仅样式不是按需导入的，因此只需按需导入样式即可：

// less less-loader是为了定制主题
npm install less less-loader vite-plugin-style-import -D

vite.config.js配置

import styleImport from 'vite-plugin-style-import';

plugins: [
  vue(),
    styleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style`
          }
        }
      ]
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        // 自定义定制主题
        modifyVars: { "primary-color": "#1188ff" },
        javascriptEnabled: true,
      },
    },
  },