Vue3配置Tailwind CSS

本文节选自TeHub小书 https://tehub.com/b/show/9rRbSM55RP/chapter/9tRwQP479G 相比element-plus,antdv的组件按需导入更加简单一些，但需要注意的是样式并不会按需导入，如果需要样式文件也按需导入，则需要引用第三

Eslint和Prettier 为了我们项目代码规范化，我们引入Eslint和Prettier。 eslint 安装eslint npm install eslint -D //或者 yarn add -D eslint 初始化配置eslint npx eslint --init 选择模式 You can also run this command directly using 'npm init @eslint/config'. ? How would you like to use ESLint? … To check synta

引入阿里图标 下载图标代码 将解压包放在asset下 我们只需要一下几个文件即可： ├── font ├── iconfont.css ├── iconfont.json （font-class用法） ├── iconfont.js （symbol用法） ├── iconfont.ttf ├── iconfont.woff └── iconfont.woff2 unicode 格式 全局引入图标 在main.js里引入图标样式 import './assets/font/iconfont.c

安装 npm install element-plus --save 引入 全局引入 在main.js中配置： ... import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus) app.mount('#app') 按需引入 首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。 npm

Teleport 是 Vue 3 中新增的组件，可以实现将组件的内容在 DOM 树中的任意位置进行渲染，而不需要进行组件嵌套。 Teleport 可以用于实现一些常见的场景，比如模态框、菜单、提示框等。在这些场景中，需要将组件的内容挂载到一个指定的 DOM 元素上，而不是挂载到组件本身所在的 DOM 元素中。 Teleport 组件提供了两个属性：to 和 disabl

今天在ios浏览器中发现strike不生效 背景 h5 strike是一种在HTML5中用于添加删除线的标签，它通过在文本上添加标记来实现删除线效果。 废弃原因 在HTML5中，h5 strike标签已被废弃，因为它不再被认为是最佳实践。相反，使用CSS样式来实现删除线是更可靠和可控的方法。 替代方案 为了添加删除线，建议使用CSS样式text-decoration：lin

安装cropperjs npm install cropperjs --save 或者 yarn add cropperjs 封装一个cropperImg组件 //cropperImg.vue <template> <div> <!--使用ref属性给图片元素命名为imageRef--> <img ref="imageRef" :src="imageSrc" alt="image" > <button @click="cropImage">裁剪图片</button> &l