uView

# 安装

插件市场地址： 点击前往 (opens new window)

# 安装教程之Vue2.0

即使是 Vue2 版本，同样比原版 uView1.0 做了一些优化，如（车牌号键盘点击1次中文后会自动切英文，倒计时支持毫秒等等）

支持：H5、App(vue)、微信小程序、支付宝小程序（其他小程序未测试）

  • 1、main.js 引入 vk-uview-ui
import uView from './uni_modules/vk-uview-ui';
Vue.use(uView);
  • 2、App.vue 引入基础样式（注意style标签需声明scss属性支持）
<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>
  • 3、uni.scss 引入全局 scss 变量文件
@import "@/uni_modules/vk-uview-ui/theme.scss";

# 安装教程之Vue3.0

友情提示：

  1. 不建议把老项目 升级到 Vue3.0 (升级非常麻烦，建议新项目才考虑是否使用Vue3.0)
  2. 支持：H5、App(vue)、微信小程序（其他小程序未测试）

正式安装的前置操作

uview赖SCSS，您必须要安装此插件，否则无法正常运行。

如果您的项目是由HBuilder X创建的，请在HX菜单的 工具->插件安装中找到 "dart-sass编译" 和 "scss/sass编译" 插件进行安装，安装完后重启下HBX

如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。

安装sass（2个都要装）

npm i sass -D

安装sass-loader（2个都要装）

npm i sass-loader -D

正式安装

  • 1、修改 manifest.json 内的 vue 版本为 vue3（如果已经是vue3则无视此步骤）
"vueVersion": "3"
  • 2、项目根目录新增 index.html 文件，文件代码为
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<title></title>
		<!--preload-links-->
		<!--app-context-->
		<!-- 配置H5的 web图标static/logo.png -->
		<link rel="icon" href="./static/logo.png" />
	</head>
	<body>
		<div id="app">
			<!--app-html-->
		</div>
		<script type="module" src="/main.js"></script>
	</body>
</html>
  • 3、main.js 引入 vk-uview-ui
// 引入 uView UI
import uView from './uni_modules/vk-uview-ui';

import { createSSRApp } from 'vue'

export function createApp() {
  const app  = createSSRApp(App)
  
  // 使用 uView UI
  app.use(uView)
  
  return { app }
}
  • 4、App.vue 引入基础样式（注意style标签需声明scss属性支持）
<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>
  • 5、uni.scss 引入全局 scss 变量文件
@import "@/uni_modules/vk-uview-ui/theme.scss";

# 通过npm方式安装（不建议）

  • 1、在项目根目录执行命令 npm i vk-uview-ui

  • 2、将上面的安装步骤中的 ./uni_modules/ 字符串去除即可

  • 3、在 pages.json 文件中写入 easycom 规则（插件市场导入方式无需写此规则）

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

4、如果是使用ts写的话，在src下创建一个.d.ts的文件，里面写入

declare module 'vk-uview-ui';

# 卸载 vk-uview-ui 的步骤

  • 1、main.js 删除vk-uview-ui
import uView from './uni_modules/vk-uview-ui';
Vue.use(uView);
  • 2、App.vue 删除基础样式
<style lang="scss">
	@import "./uni_modules/vk-uview-ui/index.scss";
</style>
  • 3、uni.scss 删除全局 scss 变量文件
@import "@/uni_modules/vk-uview-ui/theme.scss";
  • 4、删除 uni_modules/vk-uview-ui 整个目录

← 快速上手 →