首先,我的vue-cli是4.4.4版本,不是5版本,所以unocss得装老一点的版本 npm install-D@unocss/webpack@0.46.5npm install-Dunocss@0.46.5npm i-D@unocss/preset-icons@iconify/json//安装图标库 // vue.config.jsconstUnoCSS=require('@unocss/webpack').defaultmodule.exports={configureWebpack:{plugins:...
前言 在维护公司一个技术栈为 vue2 + ts + unocss 的老项目时发现 unocss 在开发环境和正式环境都不能生效,最先以为是插件的版本问题,排查后发现是因为项目在使用 unocss 时的配置没有配置完全,根据 vue-cli 的版本按照 unocss 的官方仓库里的 example
在vue.config.js中这样配置unocss,样式是生效的,但是当我打包后,elementUI中的引用的图标不能显示 css: { loaderOptions: { sass: { sassOptions: { outputStyle: "expanded", }, }, }, extract: { filename: "[name].[hash:9].css", ignoreOrder: true, publicPath: "../../", }, }, 报错fr...
使用Vue CLI创建一个新的Vue 2项目。运行以下命令: bash vue create my-vue2-project 在提示中选择Vue 2版本。 进入项目目录: 导航到你刚刚创建的Vue 2项目目录: bash cd my-vue2-project 安装UnoCSS: 在项目目录中,安装UnoCSS及其Webpack插件。由于你使用的是Vue 2和Vue CLI,所以需要安装与Webpack兼容...
下面就可以在插件中引入UnoCSS了。加载Unocss插件后,Vite会通过分析class的使用状况提供相应的样式定义。 在Button组件中引入UnoCSS 文件名:src/button/index.tsx 注意: 这个地方文件名已经从index.ts变为index.tsx import{ defineComponent,PropType,toRefs}from"vue";import"uno.css";exportdefaultdefineComponent({nam...
那么UnoCSS 就允许我们使用 c-primary 来设置颜色,c-primary 对应的样式为: .c-primary { color: var(--op-color-primary); } 当我们改变 CSS 变量 --op-color-primary 的时候,c-primary 带来的颜色也会随之改变,使我们的组件库主题相关的原子类也能够适应主题的切换与修改。 这种方式虽然使原子类支持了 ...
npm i tdesign-starter-cli -g 创建项目 td-starter init 随后在终端会有一些选项 安装依赖 # 进入项目 cd ./Vue3-Vite4-Tdesign-UnoCSS # 安装依赖 npm install # 运行 npm run dev 使用UnoCss 安装依赖 接下来进入 Vscode,添加对 UnoCss 的支持。 pnpm add -D unocss // or yarn add -D un...
本模板基于cli生成,全程时候用VSCode编码,增加类型提示,开发体验很好。 使用了图片压缩,再也不用先去外面压缩图片再重新上传了。 使用了unocss + unoIcons,再也不用从外面找图片/图标再引入了。 使用了svg-loadersvg 随便使用。 开发环境: node >=18,pnpm >=8.10.2 。
import './style.css' import App from './App.vue' import 'virtual:uno.css' createApp(App).mount('#app') 随后pnpm run dev启动项目,在控制台打开http://127.0.0.1:5173即可查看成功使用了 UnoCSS 的样式页面。 官方还给开了个后门,打开http://localhost:5173/__unocss#/,即可查看具体样式编译后的...