uniapp-2.初步安装依赖

十木木十
522 阅读2分钟

前提：项目安装的依赖后续会继续添加（这里安装的依赖只是我的项目需要和选型决定的，具体的要看自己项目的需求），在此做一个选型过程记录

暂时的项目技术栈：vue3 + ts

UI框架选型
  1. 因为之前的移动项目都是 vue2 + vantUI，所以一开始是查找vantUI是否支持，发现如果使用vantUI的话，操作比较复杂（因为我的需求是项目有可能H5或者小程序），而vantUI是vue有一套，小程序有一套，为了避免麻烦，所以不考虑vantUI，希望找一个多端兼容的ui框架
  2. 查找了相关uniapp的框架，发现很多人推荐的是uViewUI框架，但是后续查了一下uViewUI不算是支持vue3，接着发现有另外一个vk-uview-ui框架是支持vue2和vue3的，而且是基于uView基础上的，只是开发者不是同一个。之后调查了一下，但是个人看了它的issue不算多，而且貌似查到的很多都是描述用的uView，所以还是放弃选择vk-uview-ui框架
  3. 最后发现uniapp自身有内置组件，并且还有扩展组件uni-ui,所以最终选型选定是uni-ui

具体详情可以看官网

uni-ui可以单个一个个在插件市场下载引到自己项目里面，也可以，我这里偷懒直接用npm安装引入

前情提要：我是用vacode开发的，不是HBuilderX编辑器

  1. uni-ui需要依赖sass和sass-loader，需要先安装sass以及sass-loader
npm install sass -D
npm install sass-loader -D

2. uni-ui安装

  npm i @dcloudio/uni-ui

3.配置easycom 安装好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-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
Pinia 存储库

因为项目是使用vue3,所以选择使用Pinia存储库协助跨组件/页面共享状态（相当于store）

npm install pinia
Lodash工具库

纯碎个人习惯，使用这个库有些功能可以更快捷实现

npm i --save lodash
avatar
文章
阅读
粉丝