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

相关推荐
王同学要变强1 小时前
【深入学习Vue丨第二篇】构建动态Web应用的基础
前端·vue.js·学习
社恐的下水道蟑螂1 小时前
从字符串到像素:深度解析 HTML/CSS/JS 的页面渲染全过程
javascript·css·html
程序定小飞1 小时前
基于springboot的web的音乐网站开发与设计
java·前端·数据库·vue.js·spring boot·后端·spring
武昌库里写JAVA1 小时前
element-ui 2.x 及 vxe-table 2.x 使用 css 定制主题
java·vue.js·spring boot·sql·学习
行走的陀螺仪2 小时前
uni-app + Vue3 实现折叠文本(超出省略 + 展开收起)
前端·javascript·css·uni-app·vue3
冴羽2 小时前
JavaScript 异步循环踩坑指南
前端·javascript·node.js
Mr.Jessy2 小时前
Web APIs 学习第四天:DOM事件进阶
开发语言·前端·javascript·学习·ecmascript
醉方休2 小时前
开发一个完整的Electron应用程序
前端·javascript·electron
不会算法的小灰3 小时前
Vue.js 基础教程:从入门到实践
前端·javascript·vue.js
拉不动的猪3 小时前
浏览器&Websocket&热更新
前端·javascript·vue.js