vite+vue3+element-plus+less前端工程

1.先进行安装vue3和vite

2.在你要创建项目的文件夹里，shift+右键，打开powershell

输入以下命令

npm init vite

输入 y 回车

接下来就是输入项目名和选择使用什么框架创建项目，我要创建的是vue项目，就选了vue

接下来就是语言的选择，习惯vue模板语法的就选javaScript，想用精细化的加强版javaScript就用typeScript

3.出现下列提示就代表你创建好了这个vite + vue项目了

Done. Now run:

  cd yoyoAutoPlay
  npm install
  npm run dev

不用按照他的提示运行，关闭这个powershell，在文件夹中找到你创建的项目，用vscode打开

然后打开控制台，输入下列代码

npm i

下载完依赖后，使用npm run de打开项目

npm run dev

你会看到以下代码，说明你的代码已经成功运行了

 VITE v3.2.3  ready in 327 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

4.接下来就是安装less了，新开一个终端，因为要保持项目在运行状态，所以不要关闭第一个终端

新开一个终端，输入下列代码安装依赖

npm install --save less

在终端中输入lessc -v 检查是否安装成功

PS C:\Users\xiaozhou\Desktop\yoyoAutoPlay\yoyoAutoPlay> lessc -v
lessc 4.1.3 (Less Compiler) [JavaScript]

这样你在vue的项目中就可以使用less了，记得在style标签中写入lang = less

由于没有报错无法给各位处理报错，这里给一下我的环境版本

node版本 v14.20.1

npm版本 v8.3.2

vue版本": v3.2.41"

vue脚手架版本 @vue/cli 5.0.8

less版本 v4.1.3",

vite版本 v3.2.3

5.最后安装element-plus的自动导入

首先先安装element-plus

npm install element-plus --save

接下来安装自动化按需导入的两个依赖包

npm install -D unplugin-vue-components unplugin-auto-import

安装完成后，到项目的配置文件vite.config.js中配置依赖项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ]
})

这时候就可以在页面中直接使用了，需要注意的是，使用icon图标时，需要像组件一样先引入图标，然后进行图标注册。