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

相关推荐
鹿心肺语4 小时前
前端HTML转PDF的两种主流方案深度解析
前端·javascript
Lee川5 小时前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
一个懒人懒人5 小时前
Promise async/await与fetch的概念
前端·javascript·html
EchoEcho6 小时前
深入理解 Vue.js 渲染机制:从声明式到虚拟 DOM 的完整实现
vue.js
C澒6 小时前
Vue 项目渐进式迁移 React:组件库接入与跨框架协同技术方案
前端·vue.js·react.js·架构·系统架构
xiaoxue..6 小时前
合并两个升序链表 与 合并k个升序链表
java·javascript·数据结构·链表·面试
要加油哦~6 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能
一个public的class7 小时前
你在浏览器输入一个网址,到底发生了什么?
java·开发语言·javascript
青茶3607 小时前
php怎么实现订单接口状态轮询请求
前端·javascript·php
火车叼位7 小时前
脚本伪装:让 Python 与 Node.js 像原生 Shell 命令一样运行
运维·javascript·python