在uni-app中vue2引入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>
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-ui/index.scss";
 
</style>

第六步：pages.json配置

配置easycom组件模式，确保pages.json中只有一个easycom字段，否则自行合并多个引入规则。

示例代码如下：

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