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

相关推荐
The_era_achievs_hero2 分钟前
vue复习1~45
前端·javascript·vue.js
cg501729 分钟前
解析 HTML 网站架构规范
前端·javascript·html
鎏年_5 小时前
Vue2项目打包后,某些图片被转换为base64导致无法显示
前端·javascript·vue.js
小韩本韩!6 小时前
解决electron-builder vue 打包后element-ui字体图标不显示问题
vue.js·ui·electron
康6206 小时前
vue2中引入elementui
前端·javascript·elementui
听风说雨的人儿6 小时前
ElementUI时间选择、日期选择
前端·javascript·elementui
wfsm7 小时前
React多层级对象改变值--immer
前端·javascript·react.js
一个天蝎座 白勺 程序猿7 小时前
JavaScript性能优化实战手册:从V8引擎到React的毫秒级性能革命
javascript·react.js·性能优化
少年姜太公9 小时前
一个半小时的腾讯一面,人麻了
前端·javascript·面试
Jiaberrr9 小时前
Vue3 实战:基于 mxGraph 与 WebSocket 的动态流程图构建
前端·javascript·vue.js·websocket·流程图