npm 扩展vite、element-plus 、windcss

 一、检测是否已有脚手架npm

npm -v

二、npm安装 vite

npm install -D vite

如果遇如下问题：node版本不匹配。按照要求升级node.js版本

这里使用nvm安装node 22版本

nvm install 22

安装情况如下，安装完成。

nvm ls

选择要使用的node版本 22.20.0

nvm use 22.20.0

再次运行 npm install -D vite 这个命令

三、创建项目

npm init vite@latest tty-test -- --template vue

tty-test 是项目名称，

进入tty-test文件并执行 运行命令

npm run dev

运行命令如下：

项目运行完成

四、引入Element-plus

 https://element-plus.orgelement-plus 官网地址：    https://element-plus.org

使用vscode打开该项目

这里使用vscode 安装两个扩展

Vue 3 Sni

Vue (Official)

vscode打开命令行 ctrl + ~ 执行命令

npm install element-plus --save

执行完成，并修改main.js

修改App.vue 里面的内容，验证Element-plus引入是否成功。

在组件中复制一下代码，这里随意。只要生效就行了。

然后运行项目  npm run dev

引入成功。

五、引入Windcss工具库

windcss 官网地址：https://windicss.org/

执行以下命令：

npm i -D vite-plugin-windicss windicss

添加代码

import WindiCSS from 'vite-plugin-windicss'export default {plugins: [WindiCSS(),],
}

然后在main.js中添加代码

import 'virtual:windi.css'

重启项目即可

这里可以尽量安装一个插件 WindiCSS IntelliSense

验证一下，是否引入成功~!

随便选一个 背景色 试一试：

添加代码

<button class="bg-emerald-300" >windcss</button>

重启项目，效果如下

完结撒花~！