UI -- UniApp

UniApp UI

• HBuilder X

• 新建项目 – 默认模板

• pages.json同级

  • components
  • utils
  • views

• components/sl-button/sl-button.vue

<template>
	<view>
		测试123
	</view>
</template>

<script>
	export default {
		name:"sl-button",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

</style>

• views/button/index.vue

<template>
	<div>
		<sl-button></sl-button>
	</div>
</template>

<script>
</script>

<style>
</style>

• utils/function/toast.js

export const toast = (title, duration = 1500) => {
  uni.showToast({
    title,
    icon: 'none',
    duration
  })
}

• utils/index.js

import {toast} from "./functions/toast.js"

const fun = {
  toast
}


export default fun

• main.js

import App from './App'
import sl from './utils/index.js'
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.prototype.$sl = sl
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()

• pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"subPackages":[
		{
			"root":"views",
			"pages":[   // 页面配置
				{
				  "path": "button/index",
				  "style": {
				    "navigationBarTitleText": "按钮",
				    "h5": {
				      "titleNView": false
				    }
				  }
				}
			]
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"easycom": {    // 组件引入
	 "autoscan": true,
	 "custom": {
	    "^sl-(.*)": "components/sl-$1/sl-$1.vue"
	 }
	},
	"uniIdRouter": {}
}

• pages/index/index.vue