vue3-admin商品管理后台项目(创建vite项目以及配置)

秋招0 offer，继续充实自己，学学之前一直想做没做的vue-admin项目，目前是参考网易云课堂的一门课，后续会根据自己的项目学习进度一直更新下去。

首先是创建一个文件夹，然后作为我们项目的总文件夹，然后检查自己的node版本，我这使用的是较新的16.17版本。然后为了防止后面下载npm包的时候因为墙的原因卡住，所以我们进行换源。
查看当前源：

npm config get registry

更换源为国内镜像

npm config set registry=https://registry.npmmirror.com

更换成功后，在你创建的总文件夹下打开powershell，使用vite命令创建项目，比如我这里创建的项目名就叫shop-admin。

npm create vite@latest shop-admin -- --template vue

创建完成后，到这个项目目录下

cd shop-admin

然后经典:

npm install

然后运行项目:

npm run dev

到这里就是运行成功，界面挺好看的。
使用的编辑器是vscode，下载插件的话基本的是三个
Chinese汉化插件
volar
vue 3 snippets

Element plus
项目会使用到Element plus
element plus中文官网地址
所以根据官网教程，安装Element plus

npm install element-plus --save

然后编辑项目的main.js
直接使用下面代码进行覆盖

import {
    createApp } from 'vue'
import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)

app.mount('#app')

然后清除App.vue项目里的所有内容，只保留基本的三对标签，script,template,以及style，然后在element plus的组件里面随便找个组件的源代码粘贴到App.vue文件夹下，就行了。

然后原本的项目默认启动端口就会

所以到这里说明element plus导入成功能正常使用了

windi css
项目会用到windi css
windi css中文官网地址
安装相关包

npm i -D vite-plugin-windicss windicss

编辑vite.config.js

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from