vue3构建

1.用vite 构建 vue

官网：开始 | Vite 官方中文文档 (vitejs.dev)https://cn.vitejs.dev/guide/

npm create vite@latest

2.安装Tailwind CSS

官网：安装 - TailwindCSS中文文档 | TailwindCSS中文网https://www.tailwindcss.cn/docs/installation

 

 

安装 Tailwind CSS

通过 npm 安装 tailwindcss，然后创建你自己的 create your tailwind.config.js 配置文件。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改style.css （Add the @tailwind directives for each of Tailwind’s layers to your ./src/style.css file.）

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

1. 将 tailwind.config.js 改为 tailwind.config.cjs 

2. 文件内容修改为：

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

3. 将postcss.config.js 修改为 postcss.config.cjs

4. 文件内容修改为：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 

 Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）

Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）-CSDN博客https://blog.csdn.net/weixin_69553582/article/details/129584587

vue create is a Vue CLI3 only command and you are using Vue CLI 2.9.6.You may want to run..._vue create is a vue cli 3 only command and you are-CSDN博客https://blog.csdn.net/weixin_61529967/article/details/132333457