Webpack VS Vite:
Webpack默认构建整个应用;稳妥
Vite只构建必须构建的内容;以原生ESM方式提供源码,让浏览器构建;快
用Vite创建一个项目:
npm i -g [email protected]
npm init vite@latest
在局域网内运行项目:
package.json
"scripts": {
"dev": "vite --host",
在Vite项目中安装tailwindcss:
- npm i -D [email protected] [email protected] [email protected].
- npx tailwindcss init -p 创建tailwind.config.js
- 添加tailwindcss应用范围:
module.exports = {
// Tailwind 应用范围
content: ['./index.html', './src/**/*.{vue,js}'],
theme: {
extend: {}
},
plugins: []
} - 在src/styles/index.scss中导入tailwind基础指令组件,并在src/main.js引入:
@tailwind base;
@tailwind components;
@tailwind utilities; - 安装scss:
npm i -D [email protected]