【小白教程】在uni-app中引入uview（插件市场版）

记录在uview中使用uview的步骤

第一步：在uni-app插件市场中找到uview的插件

uView2.0重磅发布，利剑出鞘，一统江湖 - DCloud 插件市场

第二步：点击下载插件并导入HBuilderX并打开HbuilderX

第三步：选择对应项目并确定导入

第四步：在main.js中初始化 注意引用地址为@/uni_modules/

import App from './App'


// #ifndef VUE3
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'

Vue.use(uView)

App.mpType = 'app'
const app = new Vue({
  ...App,
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

第五步：配置样式相关

1. uni.scss 引入uview样式变量 在根目录找到uni.scss文件 在最后一行引入该文件（原因：避免uview变量被初始变量覆盖导致组件样式不生效）注意引用路径 

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

2. 在APP.vue引入uview的样式 同样注意引用路径和添加lang=“scss”

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

</style>