特别注意：需要使用管理员权限来打开命令提示符，不然会出现各种报错

yarn 

npm install -g yarn

 vite

1.使用vite创建项目

yarn create vite

2.安装包和运行

//或yarn
yarn
yarn dev

3.在vs code安装volar插件和Ant Design Vue Helper插件

需要注意的是volar与vetur插件相冲突，所以得禁用vetur

Ant design 

1.安装Ant design ui组件库

yarn add ant-design-vue

2.全局引入封装好的antd组件

//全局引入 src/main.ts
//引入ant deisgn核心文件
import antd from 'ant-design-vue'
// 引入ant design css样式
import 'ant-design-vue/dist/antd.css'
//全局注册
.use(antd)

vue-Router 

1.安装路由vue-Router

npm install vue-router@4//yarn add vue-router@4

2.配置路由，在src/libs下新建router.ts文件

//配置路由router.ts
//引入路由组件
import {createRouter,createWebHistory} from 'vue-router'//路由定义
const routers = [{name:'主页',path:'/',component: () =>import('../pages/home/home.vue')},{name:'登录页',path:'/login',component: () => import('../pages/login/login.vue')},
]const router = createRouter({//路由配置routes:routers,//历史页面history:createWebHistory()
})//导出封装好的路由，代其他地方调用
export default router

3.创建视图文件夹src/pages,存放路由页面

 axios

1.安装axios

yarn add axios

pinia

yarn add pinia

sass

1.安装scss依赖

yarn add -D sass

2.在vite.config.ts中配置sass 全局变量

// 配置样式sass全局变量css: {preprocessorOptions: {scss: {javascriptEnabled: true,additionalData: '@import "./src/assets/css/global/index.scss";',},},},

 

配置@绝对路径

1.安装node 依赖

yarn add  @types/node

2.vite.config.ts配置

import path from 'path'export default defineConfig({plugins: [vue(),],// 配置绝对路径别名resolve: {alias: {'@': path.resolve(__dirname, './src')}},
})

3.在tsconfig.json中"compilerOptions"选项中添加（ts 必须）

"baseUrl": "./","paths": {"@": ["src"],"@/*": ["src/*"],}