配置

安装配置

1. 引入miliqk-app、uv-ui主JS库

在项目根目录中的main.js中，引入并使用uv-ui的JS库，注意这两行要放在import Vue之后。

注意！

如下示例，兼容Vue2、Vue3写法。

// main.js
import App from './App'
import miliqk from '@/uni_modules/miliqk-app';
import uvUI from '@/uni_modules/uv-ui-tools'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'


Vue.use(uvUI)
Vue.use(miliqk)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()

// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uvUI);    //引入工具库
  app.use(miliqk);  //安装miliqk插件
  return {
    app
  }
}
// #endif

2. 在引入全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import "@/uni_modules/miliqk-app/css/theme.scss";

3. 引入miliqk-app、uv-ui基础样式

注意！

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

<style lang="scss">
	/*每个页面公共css */
	@import 'uni_modules/miliqk-app/css/index.scss';
	@import 'uni_modules/uv-ui-tools/index.scss';
</style>

4. 配置pages.json

此配置需要在项目根目录的pages.json中进行，基于HBuilderX可以不进行任何配置即可直接在页面中使用组件

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "uni_modules/miliqk-app/pages/home/home",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ],
  //子包
  "subPackages": [
    {
      "root": "uni_modules/miliqk-app/pages/book/chapter",
      "pages": [
        {
          "path": "chapterInfo",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/user",
      "pages": [
        {
          "path": "vip",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    }
  ]
  //...其他配置项
}

uv-ui配置参考官网