0.vue运行自启动

"dev": "vite --open"    //package.json

1.Element-plus

        安装element-plus

pnpm i element-plus

        如何使用？

<el-button :icon="Plus">按钮</el-button>
<script setup lang='ts'>
import { Plus } from "@element-plus/icons-vue"
</script>

        安装element-plus图标

pnpm i @element-plus/icons-vue

        配置element-plus

import ElementPlus from "element-plus"
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')

        配置element-plus默认语言

//@ts-ignore
import zhCn from "element-plus/dist/locale/zh-cn.mjs"
createApp(App).use(ElementPlus,{ locale:zhCn }).mount('#app')

2.环境变量的配置

        开发环境（development）

                开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调

        测试环境（testing）

                测试同事干活的环境，一般会由测试同事自己来部署，然后在此环境进行测试

        生产环境（production）

                生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志（正式提供给客户使用的环境）

        项目根目录分别添加开发，生产和测试环境的文件

.env.development
.env.production
.env.test

3.配置sass全局样式

        src -> styles -> index.scss/reset.scss/variable.scss

        配置初始化scss

        进入main.ts引入index,scss

import '@/styles/index.scss'
createApp(App).use(ElementPlus,{ locale:zhCn }).mount('#app')

        进入npm官网搜索reset.scss获取初始化文件

        复制到reset.scss文件里，并在index.scss中引入

@import './reset.scss';

        配置全局变量scss

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve:{alias:{"@":path.resolve(__dirname , "./src"),}},//配置scss全局变量css:{preprocessorOptions:{scss:{javascriptEnabled:true,additionalData:'@import "./src/styles/variable.scss";'}}}})

4.axios的二次封装

        src -> utils -> request.ts