当前位置：首页 > news >正文

VUE+Tailwind网页开发

news 2025/6/17 16:19:06

从nodejs官网下载安装包并安装：https://nodejs.org/zh-cn

参考vue官网步骤配置项目：https://cn.vuejs.org/guide/quick-start.html

$ npm create vue@latest
$ cd <your-project-name>
$ npm install

参考，安装vue-router:安装 | Vue Router

$ npm install vue-router@4

参考，安装Tailwind：Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS

$ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p

安装依赖：https://tailwindui.com/documentation#vue-installing-dependencies

npm install @headlessui/vue @heroicons/vue

项目目录如图：

./postcss.config.js文件内容如下：

export default {plugins: {tailwindcss: {},autoprefixer: {},},
}

./tailwind.config.js应该为如下内容：

/** @type {import('tailwindcss').Config} */
export default {content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}

./indx.html文件内容如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="./public/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

./src/main.js文件内容如下：

import './main.css'import { createApp } from 'vue'
import router from './router'
import App from './App.vue'createApp(App).use(router).mount('#app')

./src/main.css文件内容如下：

@tailwind base;
@tailwind components;
@tailwind utilities;

./src/App.vue文件内容如下：

<template><h1>Hello App!</h1><!-- 添加几个组件看下渲染是否成功 --><span class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10">Badge</span><span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-600/10">Badge</span><span class="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-800 ring-1 ring-inset ring-yellow-600/20">Badge</span><span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Badge</span><span class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">Badge</span><span class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10">Badge</span><span class="inline-flex items-center rounded-md bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-700/10">Badge</span><span class="inline-flex items-center rounded-md bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-700/10">Badge</span><p><strong>Current route path:</strong> {{ $route.fullPath }}</p><nav><RouterLink to="/">Go to Home</RouterLink><RouterLink to="/about">Go to About</RouterLink></nav><main><RouterView /></main>
</template>

./src/HomeView.vue文件内容如下：

<script>
export default {methods: {goToAbout() {this.$router.push('/about')},},
}
</script><template><h2>HomeView</h2><button @click="goToAbout">Go to About</button>
</template>

./src/AboutView.vue文件内容如下：

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'const router = useRouter()
const route = useRoute()const search = computed({get() {return route.query.search ?? ''},set(search) {router.replace({ query: { search } })}
})
</script><template><h2>AboutView</h2><label>Search: <input v-model.trim="search" maxlength="20"></label>
</template>

运行项目：