uniapp 安装uView-ui教程

1- 安装

npm install uview-ui

2- 下载之后复制路径中的uview-ui

3- 粘贴到项目根路径下

4- 在main.js中引入

// 引入全局uView
import uView from 'uview-ui';
Vue.use(uView);

5- 在uni.scss中引入

/*** 下方引入的为uView UI的集成样式文件，为scss预处理器，其中包含了一些"u-"开头的自定义变量* 使用的时候，请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可* uView自定义的css类名和scss变量，均以"u-"开头，不会造成冲突，请放心使用 */
@import 'uview-ui/theme.scss';

6- 在App.vue中引入
注意style要加上lang=scss

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

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

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

8- 测试

<template><view class="container"><u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs></view>
</template><script>export default {data() {return {list: [{name: '待收货'}, {name: '待付款'}, {name: '待评价',count: 5}],current: 0},methods: {change(index) {this.current = index;}}}
</script>

9- 重新启动项目

// 第二种，亲试有效，不知道为啥，用第一种方式引入，到微信开发者工具上面，总是报组件找不到
使用的编辑器是Hbuilder X
1，直接在uview官方文档内按步骤用下载的方式安装

然后是步骤，按图来
2，先安装sass

// 安装sass
npm i sass -D// 安装sass-loader
npm i sass-loader -D

下载好后，这边就会有uview ui的文件了。

3，这里是重点，放的位置不要放错了，官网文档上说放在import Vue之后，如果你放了是不生效的，会报错，要放在我这个位置才生效。找不到文件的报错原因也正是这边位置没放对出来的

import uView from '@/uni_modules/uview-ui';
Vue.use(uView);

@import '@/uni_modules/uview-ui/theme.scss';

@import "@/uni_modules/uview-ui/index.scss";

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

uniapp 安装uView-ui教程相关推荐

uni-app uView UI框架下载安装教程
uviewUI 多平台快速开发的UI框架 uni-app2018年初发布以来,一直蓬勃发展,一派欣欣向荣,社区也是人声鼎沸,众望所归. 因此,uView应运而生,uView的目标是成为uni-app生 ...
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别！
uni-app里的拓展组件uni ui与UI框架uView UI的Popup 弹出层的区别! 文章目录 1.官网Popup 弹出层链接 2.属性不同 3.属性对照 4.弹出的方式 5.uView特有属 ...
【Gazebo入门教程】第一讲 Gazebo的安装、UI界面、SDF文件介绍
[Gazebo入门教程]第一讲 Gazebo的安装.UI界面.SDF文件介绍文章目录 [Gazebo入门教程]第一讲 Gazebo的安装.UI界面.SDF文件介绍一.Gazebo的简介与安装 1. ...
uni-app集成uview
文章目录一.uni_modules方式 1. 创建uni-app项目 2. 安装uview 3. 安装SCSS插件二.配置步骤 2.1. 引入uView主JS库 2.2. 引入主题文件 2.3. ...
推荐一款多平台快速开发的前端UI框架 —— uView UI
本人体验了一遍,风格简约,功能齐全,正是心心念念的前端UI框架配合uni-app 真正是一款多平台开发的神器!! 强烈推荐!! 官网直达:uView UI 体验链接:uView多平台前端开发UI - ...
uniapp引用uView和vant Weapp组件
前言:现在的公司一般用的是uniapp来开发进行小程序,它对于我这种熟悉vue但是不怎么会原生小程序开发的人很友好.因为uniapp基于vue进行开发只要有点vue基础学上不到一个星期(保守数据)都可 ...
uniapp引入 uView
引入uView有两种方式一种是npm下载,一种是在uni-app插件市场通过uni_modules的形式进行安装(这个的前提是你是使用Hbuilder X开发的用户) npm下载 // 如果您的根目 ...
winpython使用教程-Win系统PyQt5安装和使用教程
安装PyQt5: 安装流程如下: 1.PyQt5下载界面中提供了win32,win64,linux,macos等系统的下载版本,这里我选择的是PyQt5-5.10.1-5.10.1-cp35.cp36 ...
NSIS 的 Modern UI 教程（二）
NSIS 的 Modern UI 教程(二) [ 2008-02-24 20:22:20 | 作者: 陈敏毅 ] http://chenmy.hanzify.org/article.asp?id=51 ...
NSIS 的 Modern UI 教程（一）
NSIS 的 Modern UI 教程(一) [ 2008-02-24 20:22:19 | 作者: 陈敏毅 ] http://chenmy.hanzify.org/article.asp?id=50 ...

uniapp 安装uView-ui教程

uniapp 安装uView-ui教程相关推荐

最新文章

热门文章