vue-小程序-移动端ui库

小程序的配置文件
在全局的main.js中，配置小程序文档中的json配置(去文档复制过来)

export default {
  confing: {
    'window': {
      'backgroundTextStyle': 'light',
      'navigationBarBackgroundColor': '#fff',
      'navigationBarTitleText': '邓俊玉',
      'navigationBarTextStyle': 'black'
    }
  }
}

把src文件改成src-demo，记得先把微信官方的开发工具先关闭掉。才可以改名字。
然后重新建一个src文件夹。
在该src文件夹中新建三个文件app.json，app.vue，main.js
app.json

{
  "pages":[
    "pages/index/main"
  ]
}

app.vue

<script>
export default {

}
</script>
<style>
/* 公共的样式 */
</style>

main.js

import Vue from 'vue'
import App from './app.vue'
// 设置vue的提示功能关闭
Vue.config.productionTip = false
// 声明组件的类型
App.mpType = 'app'
// 生成应用的实例
const app = new Vue(App)
// 挂载应用让整个应用生效
app.$mount()

然后去全局的main.js中ctrl+s保存。
在该src文件中新建一个pages文件夹，在pages文件夹中新建一个index文件夹，在index文件夹中新建index.vue和main.js

index.vue

<template>
  <div>
    <p>index组件。。。</p>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style>

</style>

main.js

import Vue from 'vue'
import Index from './index.vue'
const index = new Vue(Index)
// 挂载当前页面
index.$mount()

然后配置窗口就可以在src创建的app.json中配置，去微信小程序官网的框架配置中的全局配置中去复制

{
  "pages":[
    "pages/index/main"   //首页
  ],
  "window":{
    "navigationBarBackgroundColor": "#8ed45",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "邓俊玉 ",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

也可以在index文件夹中新建一个main.json文件作为局部的json配置文件

{
"navigationBarBackgroundColor": "#8ed145",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "邓俊玉 ",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
}

然后需要几个页面就建几个跟pages文件夹下面的index文件夹一样的文件夹
https://www.jianshu.com/p/ec9e4264b011

============================================================================
小程序官网
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

小程序修改vant样式
https://blog.csdn.net/weixin_44710964/article/details/104890408

vue 项目快速输出微信、支付宝、百度小程序
https://www.jianshu.com/p/1f75f55c8ce5

vue-搭建小程序环境
https://blog.csdn.net/wltsysterm/article/details/104749630/
https://www.jianshu.com/p/6f8d74be3ff8

使用vue开发小程序教程
https://www.jianshu.com/p/8f779950bfd9

小程序ui库
https://youzan.github.io/vant-weapp/#/intro
移动端ui库
https://youzan.github.io/vant/#/zh-CN/quickstart