Vue3中前台前端解决方案速记

Webpack VS Vite：
Webpack默认构建整个应用；稳妥
Vite只构建必须构建的内容；以原生ESM方式提供源码，让浏览器构建；快

用Vite创建一个项目：
npm i -g [email protected]
npm init vite@latest

在局域网内运行项目：
package.json
"scripts": {
"dev": "vite --host",

在Vite项目中安装tailwindcss：

1. npm i -D [email protected] [email protected] [email protected].
2. npx tailwindcss init -p 创建tailwind.config.js
3. 添加tailwindcss应用范围：
   module.exports = {
   // Tailwind 应用范围
   content: ['./index.html', './src/**/*.{vue,js}'],
   theme: {
   extend: {}
   },
   plugins: []
   }
4. 在src/styles/index.scss中导入tailwind基础指令组件，并在src/main.js引入：
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
5. 安装scss：
   npm i -D [email protected]