教你如何使用npm创建uniappVue3版本的项目，并安装基础框架库Scss、Unocss、Tailwindcss

如果您觉得这篇文章有帮助的话！给个点赞和评论支持下吧，感谢~

作者：哇子

互联网技术(摸鱼)交流QQ群：374984174

最近涉及到uniapp开发，在了解到可以使用hbuildx和vscode两种方式开发后，我选择后者，今天来记录下过程，方便后期复盘

也可以查看官网地址：https://uniapp.dcloud.net.cn/quickstart-cli.html

我这里是vue3版本，所以node要求18+版本，确认自己版本在18及以上（以下也是基于vue3版本的）

全局安装 vue-cli

1
npm install -g @vue/cli

创建uni-app

使用vue2正式版

1
vue create -p dcloudio/uni-preset-vue my-project

使用Vue3/Vite版

1
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

如果出现报错，访问不到github，可以下载下面的压缩包

https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip

安装依赖

进入到刚刚创建好的项目

1
npm i

等待安装完成后，你就可以运行并编写代码了

引入SCSS、SCSS-LOADER

1
npm i sass sass-loader --save-dev

建议将版本锁定在以下版本

1
2
"sass": "^1.63.2",
"sass-loader": "^10.4.1",

引入UNOCSS

官方插件教程地址：https://github.com/MellowCo/unocss-preset-weapp/tree/main/examples/uniapp_vue3

1
npm i unocss unocss-preset-weapp -D
  • unocss 0.59.* 之后版本 vite.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'

// https://vitejs.dev/config/
export default defineConfig(async ()=>{
  const UnoCss = await import('unocss/vite').then(i => i.default)

  return {
    plugins: [
      uni(),
  
      // https://github.com/unocss/unocss
      UnoCss(),
    ],
  }
})
  • unocss 0.59.* 之前版本 vite.config.ts
1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import Unocss from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    uni(),
    // https://github.com/antfu/unocss
    Unocss(),
  ],
})

写一个配置文件unocss.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()

export default {
  presets: [
    // https://github.com/MellowCo/unocss-preset-weapp
    presetWeapp(),
    // attributify autocomplete
    presetWeappAttributify(),
  ],
  shortcuts: [
    {
      'border-base': 'border border-gray-500_10',
      'center': 'flex justify-center items-center',
    },
  ],

  transformers: [
    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass(),
  ]
}
  • main.ts
1
import 'uno.css'

unocss官网：

https://unocss.dev/

unocss常用类名：https://typeofnan.github.io/vuepress-blog/article/technology/front-end/css/UnoCSS.html

引入tailwindcss

与unocss其中二选一，如果你安装了unocss了就不要安装tailwindcss了

1、安装依赖

1
npm install -D tailwindcss postcss autoprefixer

2、初始化tainwind配置文件

1
npx tailwindcss init -p

3、在 tailwind.config.js 中写入

1
2
3
4
5
6
7
8
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

4、 在App.vue中添加

1
2
3
4
5
<style>
  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';
</style>

5、在vite.config.js中修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from "vite";
import tailwindcss from 'tailwindcss';
import uni from "@dcloudio/vite-plugin-uni";

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
  plugins: [uni()],
});

6、小程序适配

1
npm i @uni-helper/vite-plugin-uni-tailwind
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// vite.config.js
import { defineConfig } from "vite";
import tailwindcss from 'tailwindcss';
import uni from "@dcloudio/vite-plugin-uni";
import uniTailwind from '@uni-helper/vite-plugin-uni-tailwind';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        tailwindcss(),
      ],
    },
  },
  plugins: [uni(), uniTailwind()],
});

7、rem to rpx,由于tailwind默认是rem单位，需要转到rpx

1
npm i tailwindcss-rem2px-preset -D
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [
    require('tailwindcss-rem2px-preset').createPreset({
      // 32 意味着 1rem = 32rpx
      fontSize: 32,
      // 转化的单位,可以变成 px / rpx
      unit: 'rpx'
    })
  ],
}

8、使用注意

在使用过程中，我发现text-[32rpx]，涉及到rpx单位时，它会识别成颜色，因为颜色也是text开头，所以最好这样text-[length:48rpx]

tailwind官网

官网：https://tailwind.nodejs.cn/docs/installation