uniapp-tailwind-uview-starter

Background: I used uniapp+uview to develop two small programs, one big and one small. The atomic style of CSS scheme was used, but I found it was quite cool to use tailwindcss. After studying, I found that the freedom to create with Hbuilder was relatively low, so I chose to build a set with vue-cli4.

The project address

uniapp-tailwind-uview-starter

Project initialization

Develop uniapp in Webstorm or Vscode

I chose the default template.

My Webstorm default uses PNPM package management, this is the first pit, start project error, so rm -rf node_modules, re-use YARN to install dependencies, then NPM serve starts normally.

The second pit is requiring Webstorm to set Nodejs v12 above, otherwise Tailwind will not be prompted intelligently. Nodejs v12

If you want to start wechat applets, select dev: mp-Weixin, and then go to wechat Developer tools and select dist package

Install tailwindcss

Mainly install the following dependencies, I locked autoprefixer to version 8.0.0 due to some bugs

`yarn add tailwindcss autoprefixer postcss`

Copy the code

Add the configuration

  1. Add tailwind. Config. js, more configuration, you can go to the project to view

  2. Add postcss. Config. Js

    `const path = require('path')` `module.exports = {` `// syntax: "postcss-scss",` `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))` `} else if (id.startsWith('@/')) {` `return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))` `} else if (id.startsWith('/') && ! id.startsWith('//')) {` `return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))` `}` `return id` `}` `}),` `require('@dcloudio/vue-cli-plugin-uni/packages/postcss'),` `require("tailwindcss")({ config: "./tailwind.config.js" }),` `require('autoprefixer')({` `remove: process.env.UNI_PLATFORM !== 'h5'` `}),` `require("postcss-class-rename")({` `"\\\\:": "--",` `"\\\\/": "_", ` `}), ` `] ` ` `}Copy the code

  3. Create a new styles folder, add tailwind. CSS and import it in main.js

    `import "@/style/tailwind.css"; // main.js`

Copy the code

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

    Copy the code

  4. Configure jsconfig.json to set the alias

    `{`
 `"compilerOptions": {`
 `"baseUrl": ".",`
 `"paths": {`
 `"@/*": ["src/*"]`
 `}`
 `},`
 `"exclude": ["node_modules", "dist"]`
`}`

Copy the code

  5. Configuration ESLint

    ` globals: {` ` / * * / ` ` uni: true, / / avoid global uni. Xx error ` `}, `Copy the code

Now you are ready to start the project and see the results

Install Uview

The official documentation

Pit:

  1. Official steps 2 and 3:@import "uview-ui/index.scss";Instead of@import "~uview-ui/index.scss";Added in front of uView~
  2. Step 4, we are using NPM mode, NPM mode does not need “@/”
  3. Uview does not have a code prompt, we need to add a new uview-comp.js, all import registration, do not need to introduce main.js, because it is just for the code prompt.

The effect

! [image-20210403141354957](/Users/lvzongyuan/Library/Application Support/typora-user-images/image-20210403141354957.png)