Code Monkey home page Code Monkey logo

whf-uni's Introduction

uni-app-vue3-tailwind-hbuilder-template

这是一个使用 hbuilderx + uni-app + vue3 + tailwind 构建的小程序模板。可以直接在 hbuilderx 中导入运行。

从 0 到 1 的搭建过程

新建一个uni-app项目

在这个项目里,添加 .gitignore,package.json,vite.config.js 文件

.gitignore 中,把 node_modules,unpackage,.hbuilderx 这一类不像被添加到 git 的添加进去。

unpackage
node_modules
.hbuilderx

然后我们 npm init -y 在项目根目录创建一个 package.json,并安装依赖:

{
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.14",
    "postcss-rem-to-responsive-pixel": "^5.1.3",
    "tailwindcss": "^3.1.7",
    "weapp-tailwindcss-webpack-plugin": "^1.6.10"
  }
}

然后添加 vite.config.js 文件,注册 weapp-tailwindcss-webpack-plugin:

import path from "path";
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
import vwt from "weapp-tailwindcss-webpack-plugin/vite";
import postcssWeappTailwindcssRename from "weapp-tailwindcss-webpack-plugin/postcss";
// 注意: 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === "h5";
const isApp = process.env.UNI_PLATFORM === "app";
const WeappTailwindcssDisabled = isH5 || isApp;
// vite 插件配置
const vitePlugins = [uni()];

const resolve = (p) => {
  return path.resolve(__dirname, p);
};

const postcssPlugins = [
  require("autoprefixer")(),
  require("tailwindcss")({
    config: resolve("./tailwind.config.js"),
  }),
];
if (!WeappTailwindcssDisabled) {
  vitePlugins.push(vwt());
  postcssPlugins.push(postcssWeappTailwindcssRename({}));
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: vitePlugins,
  // 假如 postcss.config.js 不起作用,请使用内联 postcss Latset
  css: {
    postcss: {
      plugins: postcssPlugins,
    },
  },
});

添加 tailwind.config.js

const path = require("path");
const resolve = (p) => {
  return path.resolve(__dirname, p);
};
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./**/*.vue"].map(resolve),
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: {
    preflight: false,
  },
};

这里特别注意,在声明所有路径时,必须声明为绝对路径!!!

因为 hbuilderx 有这样一个读取配置的策略:如果目标目录是相对路径,就会读取 '\HBuilderX\plugins\uniapp-cli\' 目录下的文件,这直接导致配置找不到,导致项目无法启动。

App.vue 中引入 tailwindcss

<style lang="scss">
/*每个页面公共css */
@import "tailwindcss/base";
@import "tailwindcss/utilities";
</style>

现在,你就可以在 hbuilderx 中愉快的使用 tailwindcss 了!

HbuilderX 智能提示工具

DCloud-HBuilderX团队提供了对应的插件,可以去

https://ext.dcloud.net.cn/plugin?id=8560 进行下载,即可产生智能提示。

Related projects

插件核心

weapp-tailwindcss-webpack-plugin 提供转义功能,欢迎 fork/star

CLI 工具

weapp-ide-cli: 一个微信开发者工具命令行,快速方便的直接启动 ide 进行登录,开发,预览,上传代码等等功能。

模板 template

uni-app-vite-vue3-tailwind-vscode-template

uni-app-vue3-tailwind-vscode-template

uni-app-vue2-tailwind-vscode-template

weapp-native-mina-tailwindcss-template

预设 tailwindcss preset

tailwindcss-miniprogram-preset

Bugs & Issues

目前这个插件正在快速的开发中,如果遇到 Bug 或者想提出 Issue

欢迎提交到此处

whf-uni's People

Contributors

hqk-rgb avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.