unicloud云开发进阶17-项目1配置uView

安装uview

新建项目，关联服务空间，在插件市场安装uview插件

uview跟官方插件不一样，官方的安装完就能用，这个需要进行配置

配置方法在uview的官网里，找到配置这一栏，点下载安装方式配置（因为自己的项目不是通过npm安装的，是下载到hbuilder里面安装的）

安装scss不用管，自动安装好了

步骤1. 引入uView主JS库

在项目的main.js文件中，粘贴这两行代码

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

ifndef是js的宏定义函数，下图中第一个箭头指向表示如果不是vue3，这个项目用的vue2，所以把上面两行代码复制到这个代码块的import下面

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
Vue.config.productionTip = false
App.mpType = 'app'

步骤2 引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件,就是在这个文件的第一行，粘贴下面这行代码

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

步骤3. 引入uView基础样式

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

把下面这行代码复制到app.vue中，替换掉style标签，里面的这行代码要保持在第一行

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

还有第四步是配置easycom组件模式，是自动安装的不用管，这样，实际配置3步后就完成了在项目中配置uview

测试

随便找一个按钮,复制到首页中

<u-button type="primary" :plain="true" text="镂空"></u-button>

index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
    <u-button type="primary" :plain="true" text="镂空"></u-button>
	</view>
</template>

这就是这个按钮的效果

再测试一个图标样式

    <u-icon name="photo" color="#2979ff" size="28"></u-icon>

index.vue

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
    <u-button type="primary" :plain="true" text="镂空"></u-button>
    <u-icon name="photo" color="#2979ff" size="28"></u-icon>
	</view>
</template>