vue2整合uniapp、uviewUi小程序开发

1. 初始化脚手架

   hbuilderx新建项目，选择默认模板即可，项目结构如下：

   

   Vue CLI 不是强制生成 vue.config.js

   • 如果你初始化时没选择自定义配置，项目默认没有 vue.config.js，会使用默认配置。
   • 只有当你需要修改 webpack、别名或其他配置时，才需要手动创建这个文件

2. 安装uview

   npm install uview-ui
   

   安装成功后,node_modules下就有了uview-ui

   

3. 引入uview组件和css

   1. uni.scss

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

   2. App.vue 全局引入css

      <style lang="scss">/*每个页面公共css */@import "uview-ui/index.scss";
      @import "@/common/demo.scss";  //按需引入，此处是运行官方demo才引入
      </style>
      

   3. main.js 全局引入uView

      import uView from 'uview-ui'
      import Vue from 'vue'
      Vue.use(uView)
      

   4. pages.json

      全局引入uView组件，在页面直接使用即可

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

4. 使用

   <template><view class="u-page"><u-list @scrolltolower="scrolltolower"><u-list-item v-for="(item, index) in indexList" :key="index"><u-cell :title="`列表长度-${index + 1}`"><u-avatarslot="icon"shape="square"size="35":src="item.url"customStyle="margin: -3px 5px -3px 0"></u-avatar></u-cell></u-list-item></u-list></view>
   </template><script>export default {data() {return {indexList: [],urls: ["https://cdn.uviewui.com/uview/album/1.jpg","https://cdn.uviewui.com/uview/album/2.jpg","https://cdn.uviewui.com/uview/album/3.jpg","https://cdn.uviewui.com/uview/album/4.jpg","https://cdn.uviewui.com/uview/album/5.jpg","https://cdn.uviewui.com/uview/album/6.jpg","https://cdn.uviewui.com/uview/album/7.jpg","https://cdn.uviewui.com/uview/album/8.jpg","https://cdn.uviewui.com/uview/album/9.jpg","https://cdn.uviewui.com/uview/album/10.jpg",],};},onLoad() {this.loadmore();},methods: {scrolltolower() {this.loadmore();},loadmore() {for (let i = 0; i < 30; i++) {this.indexList.push({url: this.urls[uni.$u.random(0, this.urls.length - 1)],});}},},};
   </script>

5. 官方模板