vue ts+Windi CSS

1、创建vue项目

trae(字节)打开一个空文件夹

复制代码
npm install -g @vue/cli

vue create my-project

cd my-project

vue add typescript

npm run serve

vue项目创建完成

2、安装windicss

vue add windicss

vue.config.js配置

npm install vue-router vuex windicss

javascript 复制代码
const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

  pluginOptions: {
    windicss: {
      // 在这里可以配置 WindiCSS 的相关选项
    },
  },
});

3、开始编写主页

相关推荐
SuperEugene几秒前
Vue3 Props 传参实战规范:必传校验 + 默认值 + 类型标注,避开 undefined / 类型混用坑|Vue 组件与模板规范篇
前端·javascript·vue.js·前端框架
吴声子夜歌2 分钟前
JavaScript——数组
java·javascript·算法
weixin_462901973 分钟前
ESP32电压显示
开发语言·javascript·css·python
一拳不是超人7 分钟前
2026年最值得关注的JavaScript新特性:Signals,响应式编程的下一个十年
前端·javascript·响应式编程
Luna-player11 分钟前
npm install vue-awesome-swiper@5.0.1 swiper@7.4.1安装后,我又想全删了,怎么移除
前端·vue.js·npm
晓得迷路了15 分钟前
栗子前端技术周刊第 121 期 - Vitest 4.1、Nuxt 4.4、Next.js 16.2...
前端·javascript·vite
kyle~16 分钟前
Electron桌面容器
前端·javascript·electron
隔壁小邓18 分钟前
vue如何拆分业务逻辑
前端·javascript·vue.js
En^_^Joy22 分钟前
Ajax与Axios:现代前端异步请求指南
前端·javascript·ajax
SuperEugene26 分钟前
Vue3 + Element Plus 表单校验实战:规则复用、自定义校验、提示语统一,告别混乱避坑|表单与表格规范篇
开发语言·前端·javascript·vue.js·前端框架