Vue3.2+Vite+tailwindcss搭建-CSDN博客

本文链接：https://blog.csdn.net/wl1256917083/article/details/127177468

Vue3.2+Vite+tailwindcss

记录笔记

。

安装搭建

首先，未安装过安装vite先安装

npm install -g vite

创建项目

npm init vite@latest

选择Javascript，vue
然后就直接创建好啦

安装相关的使用插件

npm install -D tailwindcss postcss autoprefixer

装生成tailwind.config.cjs

npx tailwindcss init -p

生成后有个tailwind.config.cjs文件
里面配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,vue}","./src/*.{html,js,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

这里要在两个地方注意，有时候不识别直接**@tailwindcss base**，可以这样引入

// 导入tailwind的基础指令组件
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

在这里插入图片描述

注意：

vite是没有直接安装scss的，直接用会报错，需要单独下载。

npm i -D sass

在mian.js中引入
import’./styles/index.scss’

在app.vue中试试成功没有

 <div class="bg-green-400">背景色</div>

在这里插入图片描述

因为默认是没有安装路由和vuex的，这里来安装

npm i --save vuex vue-router

移动端PC端适配方案使用vueuse

npm i @vueuse/core

使用步骤
先创建个公共方法
在这里插入图片描述

import { computed } from 'vue'
import { PC_DEVTCE_WIDTH } from '../constants'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()

/* 
判断当前是否为移动设备，判断依据屏幕当前宽度是否大于指定宽度（1280）
 */
export const isMobileTerminal = computed(() => {
  return width.value < PC_DEVTCE_WIDTH
})

配置PC指定宽度
在这里插入图片描述

// pc 设备指定宽度
export const PC_DEVTCE_WIDTH = 1280

最后在app.vue中引入
在这里插入图片描述

<template>
  <div>
    {{ isMobileTerminal }}
  </div>
</template>
<script setup>
import { isMobileTerminal } from './utils/flexible'
</script>

然后在页面上看就是自动获取是否是移动端，是就为true,否为false

配置软链接
vite中的resolve方法vite.config.js中配置

import { join } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  // 软连接
  resolve: {
    alias: {
      '@': join(__dirname, '/src')
    }
  }
})