利用uniapp+tailwindcss+uview+vue-cli搭建的一套基础模板,可以使用Webstorm或者vscode开发。集成miniprogram-ci自动部署

Overview

uniapp-tailwind-uview-starter

利用uniapp+tailwindcss+uview+sass搭建的一套基础模板,并且集成了miniprogram-ci实现自动构建上传微信小程序。

  1. tailwindcss以及flex布局的css工具拓展
  2. miniprogram-ci集成,实现通过GitHub Actions自动执行脚本构建打包上传
  3. 基本的列表和表单demo
  4. 统一的request api请求处理,枚举与正则校验

背景:之前用uniapp+uview开发了一大一小两个小程序,css方案用的原子风格的,发现用的还是挺爽的,就在想能不能用上tailwindcss,研究之后发现用Hbuilder创建的自由度比较低,于是选择了用Vue-cli4搭建了一套。

安装要求:

  1. 第一步:命令行执行yarn或者npm i,安装所需依赖
  2. 第二步:(非必要)去release.yml配置自动打包构建需要的秘钥,具体查看该文档

启动

  1. (强烈推荐)HBuilderX直接点击运行或者发行选择相应的平台
  2. webstorm或者vscode启动,稍微麻烦点,具体如下

h5

yarn run serve

小程序

yarn run dev:mp-weixin

然后打开微信开发者工具选择/dist/dev/mp-weixin文件夹

预览

live demo

1

项目地址

github

踩坑

  • 我的Webstorm默认使用pnpm包管理,这是第一个坑,启动项目时报错,于是rm -rf node_modules,重新使用yarn 安装依赖,然后npm serve正常启动。
  • 要求Webstorm设置Nodejs v12以上,否则tailwind不会智能提示。

添加配置

tailwindcss默认配置了两套,一套是专门用于小程序的,生成的tailwindcss没那么大,一套是完整的h5+小程序的 tailwind.config.js,配置较多,可以前往项目查看

You might also like...

Vue-crypto-dashboard - Cryptocurrency Dashboard made with Vue

Vue-crypto-dashboard - Cryptocurrency Dashboard made with Vue

Vue Crypto Dashboard A Cryptocurrency Dashboard build with Vue JS, PWA enabled, Binance Websocket API for realtime price, amChart for displaying histo

Dec 14, 2022

Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha-vue-toastify - A light weight and fun Vue 3 toast or notification or snack bar or however you wanna call it library.

Mosha Vue Toastify A lightweight and fun Vue 3 toast or notification or snack bar or however you wanna call it library. English | 简体中文 Talk is cheap,

Jan 2, 2023

Vue-input-validator - 🛡️ Highly extensible & customizable input validator for Vue 2

Vue-input-validator - 🛡️ Highly extensible & customizable input validator for Vue 2

🛡️ Vue-input-validator demo! What is this package all about? By using this package, you can create input validators only with the help of a single di

May 26, 2022

Vue-hero-icons - A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/heroicons, as Vue 2 functional components.

vue-hero-icons For Vue3, install the official package @heroicons/vue A set of free MIT-licensed high-quality SVG icons, sourced from @tailwindlabs/her

Dec 16, 2022

A plugin that can help you create project friendly with Vue for @vue/cli 4.5

vue-cli-plugin-patch A plugin that can help you create project friendly with Vue for @vue/cli 4.5. Install First you need to install @vue/cli globally

Jan 6, 2022

Veloce: Starter template that uses Vue 3, Vite, TypeScript, SSR, Pinia, Vue Router, Express and Docker

Veloce Lightning-fast cold server start Instant hot module replacement (HMR) and dev SSR True on-demand compilation Tech Stack Vue 3: UI Rendering lib

Oct 7, 2022

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Oct 5, 2022

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

This is my portfolio GitHub clone website. The frontend is build using NextJS and TailwindCSS.

Github Clone Portfolio Website Tech Stack used: NextJS Tailwind CSS The contact form in this website is connected to Notion. If you want to integrate

Oct 5, 2022

trying to clone tiktok using next, typescript, tailwindcss and hasura graphql. For educational purposes only

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Jan 4, 2022

simple chat app created with nextjs, express, tailwindcss, and WebSockets

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Sep 10, 2022

Spotify 2.0 com NextJS 12 - MIddleware, TailwindCSS, Spotify API, NextAuth, Recoil

Spotify 2.0 com NextJS 12 - MIddleware, TailwindCSS, Spotify API, NextAuth, Recoil

Spotify Clone A spotify clone made with NextJS 12, TailwindCSS, NextAuth, Spotify API, Recoil Lessons Learned Setting up NextJS with Tailwind. NextAut

Mar 14, 2022

React + TailwindCSS 3.0

React + TailwindCSS 3.0

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Dec 25, 2021

Auth model created by Using nodeJs for backend & reactJs for frontend with the help of TailwindCss in styling

Auth model created by Using nodeJs for backend & reactJs for frontend with the help of TailwindCss in styling

The Universal Auth System Using The MERN Stack Including Mysql -- The project is divded to two separte projects 1- The Client side - containing the

Aug 22, 2022

Blog - ⚡️ Blog pessoal onde publico artigos relacionados a dev. Desenvolvido com Next.js e TailwindCSS

Blog - ⚡️ Blog pessoal onde publico artigos relacionados a dev. Desenvolvido com Next.js e TailwindCSS

⚡️ Blog Blog pessoal desenvolvido com Next.js e TypeScript ℹ️ Sobre o projeto Este projeto consiste em um blog pessoal, onde futuramente farei posts d

Oct 6, 2022

A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed

A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed

tailwindcsscli A CLI for generating starter files for different JS frameworks with tailwindCSS pre-installed Installation To install the CLI, run the

Sep 30, 2022

Rede social baseada no ShareMe para compartilhamento e download de fotos em React,Sanity.io e TailWindCSS

Rede social baseada no ShareMe para compartilhamento e download de fotos em React,Sanity.io e TailWindCSS

Photophan 📄 Descrição phothopan é uma rede social para o compartilhamento e download de imagens,foi desenvolvida utilizando React(Frontend),Sanity(Ba

Jan 8, 2022

A TailwindCSS variant for class-based dark mode with CSS Modules.

A TailwindCSS variant for class-based dark mode with Svelte's scoped stylesheets and CSS modules. If you've ever tried to use TailwindCSS dark mode wi

Dec 1, 2022

This is a TailwindCSS, Next.js, medusa starter template

This is a TailwindCSS, Next.js, medusa starter template

This is a TailwindCSS, Next.js, medusa starter template. Feel free to use it, fork it and star it 🥳🙌

May 5, 2022

Personal website and blog made using NextJS, TailwindCSS, GraphCMS, and MDX bundler

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Aug 21, 2022
Comments
  • 编译错误

    编译错误

    能不能帮我看下这个问题,命令行里是正常的,但webstorm一直报错。

    D:\Programs\nodejs\node.exe D:\Programs\nvm\npm\node_modules\yarn\bin\yarn.js run dev:mp-weixin
    yarn run v1.22.5
    $ cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch
    请注意运行模式下,因日志输出、sourcemap以及未压缩源码等原因,性能和包体积,均不及发行模式。若要正式发布,请点击发行菜单或使用cli发布命令进行发布
    小程序各家浏览器内核及自定义组件实现机制存在差异,可能存在样式布局兼容问题,参考:https://uniapp.dcloud.io/matter?id=mp
    
    |  开始编译当前项目至 mp-weixin 平台...postcss-class-rename: postcss.plugin was deprecated. Migration guide:
    https://evilmartians.com/chronicles/postcss-8-plugin-migration
     ERROR  Error: EINVAL: invalid argument, mkdir 'D:\Works\uni\uniapp-tailwind-uview-starter\dist\dev\mp-weixin\D:\Works\uni\uniapp-tailwind-uview-starter\src\components\divider'
    Error: EINVAL: invalid argument, mkdir 'D:\Works\uni\uniapp-tailwind-uview-starter\dist\dev\mp-weixin\D:\Works\uni\uniapp-tailwind-uview-starter\src\components\divider'
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    
    

    node版本是12.19.0,

    感觉是打包的时候出现建错文件了,但命令行是正常的,只有在webstorm上用npm插件运行时会有这个问题。 感谢。

    opened by shelli-site 1
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

vue-next This is the repository for Vue 3.0. Quickstart Via CDN: <script src="https://unpkg.com/vue@next"></script> In-browser playground on Codepen S

vuejs 34.6k Jan 4, 2023
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

Write components once, run everywhere. Compiles to: At a glance Mitosis is inspired by many modern frameworks. You'll see components look like React c

Builder.io 7.7k Jan 1, 2023
基于vue3.0-ts-Element集成的简洁/实用后台模板!《带预览地址》vue-admin;vue+admin;vue-element;vue+element;vue后台管理;vue3.0-admin;vue3.0-element。

一、基于vue3.0+ts+Element通用后台admin模板 二、在线预览地址:http://admin.yknba.cn/ 三、下载使用: 1、克隆代码 通过git将代码克隆到本地;或者使用下载安装包模式进行下载。 2、进入目录 进入项目的根目录:vue3.0-ts-admin 3、安装依

null 64 Dec 16, 2022
Admin dashboard template built with tailwindcss & vue-jsx.

K UI Admin Dashboard Template (Vue 3 & JSX) ⚠️ This template is not finished yet and still in design phase. We are building it in public. Live preview

Kamona-UI 4 Aug 14, 2022
:tada: A magical vue admin https://panjiachen.github.io/vue-element-admin

English | 简体中文 | 日本語 | Spanish SPONSORED BY 活动服务销售平台 客户消息直达工作群 Introduction vue-element-admin is a production-ready front-end solution for admin inter

花裤衩 80.1k Dec 31, 2022
:eyes: Vue in React, React in Vue. Seamless integration of the two. :dancers:

vuera NOTE: This project is looking for a maintainer! Use Vue components in your React app: import React from 'react' import MyVueComponent from './My

Aleksandr Komarov 4k Dec 30, 2022
🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin ?? 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统 简介 vue3-element-admin 是一个后台前端解决方案,它基于 vue3 和 element-plu

雪月欧巴 84 Nov 28, 2022
Jenesius vue modal is simple library for Vue 3 only

Jenesius Vue Modal Jenesius vue modal is simple library for Vue 3 only . Site Documentation Installation npm i jenesius-vue-modal For add modals in yo

Архипцев Евгений 63 Dec 30, 2022
A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Marc Duiker 6 Jun 25, 2022