Vue3-ts uni-APP engineering template construction

This is the 24th day of my participation in Gwen Challenge

preface

The first two period:

  • on
  • In the

A “UNI-Vue3-TS” engineering template has been built that includes Vue3,TS,Sass,Vant syndrome,Vuex4,Axios,Eslint, and other features

This section adds more features to the template:

  • less
  • tailwindcss

less

Templates do not support less by default

Install less-loader and less

The version needs to be specified. Webpack that is too high to support earlier versions will not run smoothly

Yarn add less-loader@^7 less@^3.13.1 --devCopy the code

tailwindcss

Write class directly in HTML to achieve page style generation

That is, some time ago when just came out, the community discussion is very intense a thing

Personally, I don’t like this, which leads to too much coupling between style and page content, as if back to the era of bootstrap

Emm but if you use it to write some simple examples, the demo will work

The advantage is that the final style of the tag can be seen intuitively for uncomplicated groups, without searching the style file

Here’s how to use uni-app and follow the documentation

Install dependencies

  • tailwindcss
  • postcss
  • autoprefixer
  • postcss-class-rename
yarn add tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 postcss-class-rename --dev
Copy the code

Once the dependencies are installed, simply configure them

configuration

Create the tailwind.config.js file in the root directory. The configuration of the compatible applets section is referenced at the end of this article

module.exports = {
  purge: ['./src/**/*.{vue,js,ts,jsx,tsx}'].darkMode: false.// or 'media' or 'class'
  separator: '__'.// Compatible applet, replace: with __
  theme: {
    extend: {},},variants: {
    extend: {},},plugins: [].corePlugins: {
    // Compatible applet to disable plug-ins with * selector
    preflight: false.space: false.divideColor: false.divideOpacity: false.divideStyle: false.divideWidth: false,}};Copy the code

Modify the postcss.config.js file. The final configuration is as follows

const path = require('path');

module.exports = {
  parser: require('postcss-comment'),
  plugins: [
    require('postcss-import') ({resolve(id, basedir, importOptions) {
        if (id.startsWith('~ @ /')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
        }
        if (id.startsWith('@ /')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
        }
        if (id.startsWith('/') && !id.startsWith('/ /')) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
        }
        returnid; }}),/ / new
    require('tailwindcss'),
    require('autoprefixer') ({remove: process.env.UNI_PLATFORM ! = ='h5',})./ / new
    require('postcss-class-rename') ({'\ \ \ \.: '_'.// Compatible applets that replace class names with. And/with _
    }),
    require('@dcloudio/vue-cli-plugin-uni/packages/postcss')]};Copy the code

Add code to app.vue to introduce tailwindCSS

<style>
/* tailwindcss */
@import 'tailwindcss/tailwind.css';
</style>
Copy the code

Page use

The reference document uses a few simple attributes here

<view>
  <text class="text-xl font-bold text-red-500">tailwindcss</text>
</view>
Copy the code

Render as follows

The last

This is the end of an engineering template for uni-app development applets that includes common features. If you have any more recommended features, please feel free to comment

Data summary

  • Uni-vue3-ts: Template repository
  • PostCSS 7 compatibility build
  • Uni – use tailwindcss app