uni-app有两种创建创建项目的方式，通过HBuilderX可视化界面进行创建和通过vue-cli命令行，用HBuilderX模板创建uniapp项目是很方便，但是cli的好处还有可以自定义环境变量和自定义h5、app资源的打包输出、实现持续集成等。

由于我们公司使用的Jenkins自动构建工具打包发版到app、h5、小程序等，所以需要将原本的HBuilderX模板创建的uniapp项目转为cli创建项目，本文主要解决cli构建uniapp项目及相关依赖可能存在的问题

步骤1

1、cli新建uniapp项目

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

2、通过键盘箭头上下键选择模板,建议选择默认模板

3、项目结构如图所示

步骤2

1、安装sass

如果使用HBuilder X编辑器，在HBuilder X菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装。因为项目采用vue-cli创建的，所以须通过以下命令安装对sass(scss)的支持。

这里注意我是Node14.20.0的版本对应sass使用如下版本

// 安装node-sass

npm i node-sass@4.14.1

// 安装sass-loader

npm i sass-loader@7.3.1

附：node与node-sass版本对照表

2、安装uview

会直接最新安装2.0版本的

//安装方式：npm安装
npm install uview-ui

3、配置uview：

3.1  在main.js中，引入并使用uView的JS库

import uView from "uview-ui";
Vue.use(uView);

3.2  在uni.scss文件中，引入uView的全局SCSS主题文件

/* uni.scss */
@import 'uview-ui/theme.scss';

3.3  在App.vue首行引入，uView基础样式

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>

3.4  在pages.json中 配置easycom组件模式

"easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },

步骤3

安装tailwindcss插件

node14安装postcss@^7 autoprefixer@^9

1、安装依赖

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss-class-rename -D
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

2、初始化配置文件

这步会生成tailwindcss.config文件，如果没有生成，也可以自己手动在根目录创建

npx tailwindcss-cli@latest init

3、修改tailwindcss.config.js文件

module.exports = {
  purge: ['./public/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false,
  separator: '__', // 兼容小程序，将 : 替换成 __
  theme: {
    // 兼容小程序，将默认配置里带 .和/ 清除
    // 如果有些属性你没有用到，请在 corePlugins 里禁用
    extend: {},
    fontSize: {},
    height: {},
    inset: {},
    screens: {},
    spacing: {},
    translate: {},
    width: {}
  },
  variants: {},
  plugins: [],
  corePlugins: {
    // 兼容小程序，将带有 * 选择器的插件禁用
    preflight: false,
    space: false,
    divideColor: false,
    divideOpacity: false,
    divideStyle: false,
    divideWidth: false
  }
}

4、修改postcss.config.js文件

在postcss.config.js文件中在加入下面代码，引入tailwindcss，postcss-class-rename替换规则可以自行调整，只要css不报错就行
如要安装就npm安装postcss-class-rename@1.0.1版本

require('tailwindcss')({ config: "./tailwind.config.js" }),
// 使用postcss-class-name 包将小程序不支持的类名写法转换为支持的类名，如："hover:xxx"
require('postcss-class-rename')({
  "\\\\:": "--",
  "\\\\/": "--",
  "\\\\.": "--",
  ".:": "--",
  "\\\*": "--"
}),

5、引入taiwindcss

5.1  在src 目录新建 style 文件夹并创建tailwind.css文件，并写入

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

5.2  在src 目录下的main.js里面引用

import '@/style/tailwind.css'

5.3  在src 目录下的App.vue里面引用

@import 'tailwindcss/tailwind.css';

6、在项目中使用

试试在src/pages目录下任意页面使用，能看到背景颜色出现，说明安装引入成功，可能mb-10会不生效，原因是taiwindcss使用rem，小程序使用rpx单位，需要做兼容处理1。

<text class="title bg-red-500">{{title}}</text>

7、运行到微信小程序

npm run dev:mp-weixin

步骤4

将原HBuilderX模板创建uniapp项目工程文件 全部拷贝至src目录，除unpackage、nativeplugins和工程化的文件eslint、pretty、node_modules等

将项目中的依赖的包汇总到cli项目的package.json中，重新安装包依赖