使用vue-cli搭建uni-app项目（vue3+vite）

安装环境

注意：我使用的是pnpm，如果没有pnpm可以使用npm，推荐使用pnpm，下载速度比较快

全局安装 vue-cli

pnpm install -g @vue/cli

创建uni-app项目

我使用的是Vue3/Vite版，如果需要使用别的版本请参考uni-app官网 (dcloud.net.cn)

创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

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

创建以 typescript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）

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

注意

Vue3/Vite版要求 node 版本^14.18.0 || >=16.0.0
如果使用 HBuilderX（3.6.7以下版本）运行 Vue3/Vite 创建的最新的 cli 工程，需要在 HBuilderX 运行配置最底部设置 node路径为自己本机高版本 node 路径（注意需要重启 HBuilderX 才可以生效）
- HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node路径
- HBuilderX Windows 版本菜单栏工具->设置->运行配置->node路径

运行、发布uni-app

pnpm run dev:%PLATFORM%
pnpm run build:%PLATFORM%

值	平台
app-plus	app平台生成打包资源（支持npm run build:app-plus，可用于持续集成。不支持run，运行调试仍需在HBuilderX中操作）
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-lark	飞书小程序
mp-qq	qq 小程序
mp-360	360 小程序
mp-kuaishou	快手小程序
mp-jd	京东小程序
mp-xhs	小红书小程序
quickapp-webview	快应用(webview)
quickapp-webview-union	快应用联盟
quickapp-webview-huawei	快应用华为

拿H5为例

# 运行
pnpm run dev:H5
# 打包
pnpm run build:H5

可以自定义更多条件编译平台，比如钉钉小程序，参考package.json文档

配置@别名

// 在vite.config.js添加下面配置
export default defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  }
});

安装sass预编译器

如果不爱使用sass的话可以省略该步骤

pnpm install sass

安装vk-uview-ui

注意：使用该ui库的时候必须要使用sass，vk-uview-ui底层实现的时候使用的是sass。

下载

pnpm i vk-uview-ui

在App.vue 引入基础样式

<style lang="scss">
	@import "vk-uview-ui/index.scss";
</style>

uni.scss 引入全局 scss 变量文件

@import "vk-uview-ui/theme.scss";

在 pages.json 文件中写入 easycom 规则

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

安装tailwindcss

tailwindcss是一个很好用的写样式的工具，不是必须的，不需要可以省略该步骤

安装

pnpm i -D weapp-tailwindcss-webpack-plugin postcss-rem-to-responsive-pixel tailwindcss postcss autoprefixer

然后添加tailwind.config.js

module.exports = {
  content: ['./index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
  theme: {
    extend: {}
  },
  plugins: [],
  corePlugins: {
    preflight: false
  }
}

修改vite.config.[jt]s配置

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

import vwt from 'weapp-tailwindcss-webpack-plugin/vite';

// 注意： 打包成 h5 和 app 都不需要开启插件配置
const isH5 = process.env.UNI_PLATFORM === 'h5';
const isApp = process.env.UNI_PLATFORM === 'app';
const WeappTailwindcssDisabled = isH5 || isApp;
// vite 插件配置
const vitePlugins = [uni()];
// postcss 插件配置
const postcssPlugins = [require('autoprefixer')(), require('tailwindcss')()];
if (!WeappTailwindcssDisabled) {
  vitePlugins.push(vwt());

  postcssPlugins.push(
    require('postcss-rem-to-responsive-pixel')({
      rootValue: 32,
      propList: ['*'],
      transformUnit: 'rpx',
    })
  );
}
// https://vitejs.dev/config/
export default defineConfig({
  plugins: vitePlugins,
  // 假如 postcss.config.js 不起作用，请使用内联 postcss Latset
  css: {
    postcss: {
      plugins: postcssPlugins,
    },
  },
});

在src/App.vue中添加

<style lang="scss">
@import 'tailwindcss/base';
@import 'tailwindcss/utilities';
</style>

然后就大功告成了!

引入自动导入插件

antfu/unplugin-auto-import插件地址

安装

pnpm i -D unplugin-auto-import

在vite.config.js中添加配置

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      // 自动导入vue和uni-app中所有的api
      imports: [ 'vue', 'uni-app' ],
      dts: true,
    }),
  ],
})