注意：
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路径
环境安装 1.全局安装 vue-cli
npm install -g @vue/cli
2.创建以 javascript 开发的工程（如命令行创建失败，请直接访问 gitee 下载模板）
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
3.准备 sass
npm i sass -D 或 yarn add sass -D
4.安装 sass-loader
npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
5.安装 uni-ui
npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
6.配置easycom
使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom
打开项目根目录下的 pages.json 并添加 easycom 节点：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
在 template 中使用组件：
注意
uni-ui 现在只推荐使用 easycom ，如自己引用组件，可能会出现组件找不到的问题 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 vue.config.js 解决：
// 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
transpileDependencies: ['@dcloudio/uni-ui']
}
// 如果是 vue3 + vite, 无需添加配置
uni-ui 是uni-app内置组件的扩展。注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。uni-ui 不支持使用 Vue.use() 的方式安装
推荐文章
您阅读本篇文章共花了：
发表评论