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、开始编写主页

相关推荐
用户51681661458411 分钟前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅1 分钟前
JavaScript 作用域
前端·javascript
前端缘梦1 分钟前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
云枫晖13 分钟前
JS核心知识-事件循环
前端·javascript
Simon_He14 分钟前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
eason_fan1 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
前端付豪2 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮2 小时前
js符号(Symbol)
前端·javascript
大怪v3 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_5 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript