模板网站制作服务一键优化下载安装
目录
npx
开始使用 Tailwind CSS
1. 安装 Node.js 和 cnpm
2. 使用 VScode 创建 uni-app 项目
开始使用 Tailwind CSS
1.安装 Tailwind CSS
2.配置 Vite 插件
3.修改配置
4.导入 Tailwind CSS
5.开始在 HTML 中使用 Tailwind
总结
npx
实际上，npx degit 和 git clone 都能用来获取代码仓库中的模板或项目，但是它们的实现方式和用途有所不同。让我详细说明为什么在创建 uni-app 项目时使用 npx degit 更为合适，并探讨它的优势。
npx degit是一种轻量级的方式来获取 Git 仓库的某个项目模板，degit是一个专门用于克隆模板的工具。它会下载指定的 Git 仓库中的最新代码，并且不包括.git目录，也不保留提交历史。npx 能避免全局安装的模块。比如，
create-react-app这个模块是全局安装，npx 可以运行它，而且不进行全局安装。注意，只要 npx 后面的模块无法在本地发现，就会下载同名模块。比如，本地没有安装
http-server模块，下面的命令会自动下载该模块，在当前目录启动一个 Web 服务。npx http-server
- 避免 Git 历史：
degit只会克隆指定的文件内容，不会克隆.git目录，从而避免了冗余的 Git 提交历史记录。这样克隆的代码更干净，节省了存储空间。 - 快速克隆：因为没有历史记录，
degit的克隆速度相对更快，适用于获取一个项目模板的场景。 - 适用于模板使用场景：
degit是为获取项目模板而设计的，特别适用于快速初始化项目，而不关心项目的版本历史。 - 简单易用：通过
npx degit，你不需要手动配置或安装degit工具，它会自动下载并执行。npx使得执行命令变得更加简便，直接可以从远程 Git 仓库获取模板。
| 功能 | git clone | npx degit |
|---|---|---|
| 克隆内容 | 包括代码文件和 Git 提交历史（.git 文件夹） | 只克隆项目文件，不包含 .git 文件夹 |
| 文件大小 | 包括 Git 历史，文件较大 | 不包含 Git 历史，文件较小 |
| 使用场景 | 用于获取整个 Git 仓库，包括所有历史记录 | 用于获取项目模板，不需要 Git 历史 |
| 速度 | 较慢（需要克隆整个 Git 历史） | 较快（只克隆文件，不包含历史） |
| 是否需要手动安装 | 需要安装 Git | 无需安装，npx 自动执行 |
| 是否包含版本控制信息 | 包含（有 .git 文件夹） | 不包含（没有 .git 文件夹） |
开始使用 Tailwind CSS
1. 安装 Node.js 和 cnpm
如果你已经安装了 Node.js 和 pnpm，可以跳过此步骤。否则，确保它们已正确安装：
- Node.js：可以通过 Node.js 官网 下载并安装。
- pnpm：可以使用以下命令通过 npm 安装 pnpm：
npm install -g pnpm2. 使用 VScode 创建 uni-app 项目
在 VScode 中，打开终端并按照以下步骤操作：
- 打开 VScode，进入你想要存放 uni-app 项目的文件夹。
- 打开 VScode 的终端，运行以下命令来创建一个新的 uni-app 项目：
- 创建完成后，进入项目目录：
- 安装项目所需的依赖，使用 p
npm替代npm安装（更快）： - 你可以通过
VScode提供的终端来运行项目。执行以下命令来启动开发环境： - 如果一切正常，浏览器会自动打开，显示你的 uni-app 项目的欢迎页面。
npx degit dcloudio/uni-preset-vue#vite my-vue3-projectcd my-uni-apppnpm installpnpm run dev
开始使用 Tailwind CSS
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他模板中的类名，生成相应的样式，然后将它们写入静态 CSS 文件。
它快速、灵活、可靠——无需运行时间。
1.安装 Tailwind CSS
tailwindcss通过@tailwindcss/vitenpm安装。
npm install tailwindcss @tailwindcss/vite2.配置 Vite 插件
将插件添加@tailwindcss/vite到您的 Vite 配置中。
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({plugins: [tailwindcss(),],
})The plugin "externalize-deps" was triggered by this import
vite.config.js:3:24:
3 │ import tailwindcss from "@tailwindcss/vite";
如上报错 继续往下看
3.修改配置
将package.json的type设置成module
如下报错
TypeError: uni is not a function,由于 vite-plugin-uni 插件不兼容ESM ,
在不删除 "type": "module" 的情况下
由于 vite-plugin-uni 插件不兼容ESM ,可以使用下面的方法过渡一下
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import tailwindcss from "@tailwindcss/vite";
// https://vitejs.dev/config/
export default defineConfig({plugins: [uni.default(), tailwindcss()],
});
4.导入 Tailwind CSS
向您的 CSS 文件添加一个@import导入 Tailwind CSS 的内容。
新建 /static/index.css
@import "tailwindcss";
main.js 引入
import { createSSRApp } from "vue";
import App from "./App.vue";
import "./static/index.css";
export function createApp() {const app = createSSRApp(App);return {app,};
}5.开始在 HTML 中使用 Tailwind
确保已编译的 CSS 包含在<head> （您的框架可能会为您处理这个问题）中，然后开始使用 Tailwind 的实用程序类来设置您的内容样式。
<template><view class="content"><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="text-3xl font-bold underline text-[#e00]"> {{ title }}</text></view></view>
</template><script>
export default {data() {return {title: "Hello",};},onLoad() {},methods: {},
};
</script><style>
.content {display: flex;flex-direction: column;align-items: center;justify-content: center;
}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;
}.text-area {display: flex;justify-content: center;
}.title {font-size: 36rpx;color: #8f8f94;
}
</style>
总结
可以安装插件提示 Tailwind CSS IntelliSense
附上作者生效的环境
- "vite": "5.2.8"
- "tailwindcss": "^4.1.11",
- "vue": "^3.4.21",
- "@tailwindcss/vite": "^4.1.11",
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
官网地址如果采用v3.4.17请翻阅其他文档！！！
{"name": "uni-preset-vue","version": "0.0.0","type": "module","scripts": {"dev:custom": "uni -p","dev:h5": "uni","dev:h5:ssr": "uni --ssr","dev:mp-alipay": "uni -p mp-alipay","dev:mp-baidu": "uni -p mp-baidu","dev:mp-jd": "uni -p mp-jd","dev:mp-kuaishou": "uni -p mp-kuaishou","dev:mp-lark": "uni -p mp-lark","dev:mp-qq": "uni -p mp-qq","dev:mp-toutiao": "uni -p mp-toutiao","dev:mp-harmony": "uni -p mp-harmony","dev:mp-weixin": "uni -p mp-weixin","dev:mp-xhs": "uni -p mp-xhs","dev:quickapp-webview": "uni -p quickapp-webview","dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei","dev:quickapp-webview-union": "uni -p quickapp-webview-union","build:custom": "uni build -p","build:h5": "uni build","build:h5:ssr": "uni build --ssr","build:mp-alipay": "uni build -p mp-alipay","build:mp-baidu": "uni build -p mp-baidu","build:mp-jd": "uni build -p mp-jd","build:mp-kuaishou": "uni build -p mp-kuaishou","build:mp-lark": "uni build -p mp-lark","build:mp-qq": "uni build -p mp-qq","build:mp-toutiao": "uni build -p mp-toutiao","build:mp-harmony": "uni build -p mp-harmony","build:mp-weixin": "uni build -p mp-weixin","build:mp-xhs": "uni build -p mp-xhs","build:quickapp-webview": "uni build -p quickapp-webview","build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei","build:quickapp-webview-union": "uni build -p quickapp-webview-union"},"dependencies": {"@dcloudio/uni-app": "3.0.0-4060620250520001","@dcloudio/uni-app-harmony": "3.0.0-4060620250520001","@dcloudio/uni-app-plus": "3.0.0-4060620250520001","@dcloudio/uni-components": "3.0.0-4060620250520001","@dcloudio/uni-h5": "3.0.0-4060620250520001","@dcloudio/uni-mp-alipay": "3.0.0-4060620250520001","@dcloudio/uni-mp-baidu": "3.0.0-4060620250520001","@dcloudio/uni-mp-harmony": "3.0.0-4060620250520001","@dcloudio/uni-mp-jd": "3.0.0-4060620250520001","@dcloudio/uni-mp-kuaishou": "3.0.0-4060620250520001","@dcloudio/uni-mp-lark": "3.0.0-4060620250520001","@dcloudio/uni-mp-qq": "3.0.0-4060620250520001","@dcloudio/uni-mp-toutiao": "3.0.0-4060620250520001","@dcloudio/uni-mp-weixin": "3.0.0-4060620250520001","@dcloudio/uni-mp-xhs": "3.0.0-4060620250520001","@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001","@tailwindcss/vite": "^4.1.11","tailwindcss": "^4.1.11","vue": "^3.4.21","vue-i18n": "^9.1.9"},"devDependencies": {"@dcloudio/types": "^3.4.8","@dcloudio/uni-automator": "3.0.0-4060620250520001","@dcloudio/uni-cli-shared": "3.0.0-4060620250520001","@dcloudio/uni-stacktracey": "3.0.0-4060620250520001","@dcloudio/vite-plugin-uni": "3.0.0-4060620250520001","@vue/runtime-core": "^3.4.21","vite": "5.2.8"}
}