1. 引入别名：build/webpack.base.conf.js： alias

App.vue

1
2
3
4
5
6

<script>
export default {}
</script>
<style>
全局样式
</style>

入口文件 —- main.js

1
2
3
4
5
6
7
8
9
10
11
12

import Vue from 'vue'
import App from './App'

// 1. 设置vue的提示功能 关闭
Vue.config.productionTip = false
// 2. 声明当前组件的类型
App.mpType = 'app'

// 3. 生成应用的实例
const app = new Vue(App)
// 4. 挂载整个应用
app.$mount()

配置文件 app.json

相关配置项去官网

pages 页面文件夹

• main.vue
• main.js 必须要声明当前应用并挂载当前页面
• main.json

开发环境执行 npm run dev 打包 然后在微信开发者工具中打开该项目

脱坑汇总

1. mpvue开发时，如何设置全局样式
   在微信开着工具中发现其根标签为page，故在app.vue中对page标签设置样式 ，但是直接写在style中经过编译之后会生成hash导致样式不生效，解决方法是设置style的lang为wwxss

   <style lang="wxss">

   page{

   background-color:#F4F4F4 !important;

   }
   

2. 使用bckground时报错main.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用标签。
   http://imgbase64.duoshitong.com 将图片编码，将得到的字符放到background-image属性值中：