从零开始搭建一个 Vue3+TailWindCSS 项目 实战版
1.在本节中，我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。
2.确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令 (不要带上 > 符号)：
> npm init vue@latest3.这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.4.如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
> cd <your-project-name>
> npm install
> npm run dev
你现在应该已经运行起来了你的第一个 Vue 项目！
通过 npm 安装 Tailwind
5.对于大多数项目（并利用 Tailwind 的自定义功能），您需要通过 npm 安装 Tailwind 及其依赖项。
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p6.修改taiwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
"weather-primary": "#00668A",
"weather-secondary": "#004E71"
}
},
fontFamily: {
Roboto: ["Roboto, sans-serif"],
},
container: {
padding: "2rem",
center: true,
},
screens: {
sm: "640px",
md: "768px"
}
},
plugins: [],
}
7.新建style.css
/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
8.main.js增加
import "./assets/tailwind.css";
9.index.html引用
<script type="module" src="/src/main.js"></script>
发表评论