小程序开发 mpvue

小程序开发 mpvue

简介

1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架
2.融合了原生小程序和Vue.js的特点，可完全组件化开发

特点

1.拥有vuejs开发体验，组件化开发
2.webpack构建项目
3.h5转化工具将项目编译成小程序识别的文件

初始化项目

和初始化一个PC vue项目类似

npm install vue-cli -g
vue init mpvue/mpvue-quickstart my-project
cd my-project
npm install
npm start

开启项目

注册小程序

我们将默认的src文件夹删掉，自己创建一个src文件夹，编码

app.json // 全局配置文件
app.vue // 等同于原生小程序中的app.js
main.js // 应用入口文件，声明组件类型，挂载组件

我们看下main.js入口文件

import vue from 'vue'
import App from './app.vue'

vue.config.productionTip = false // 将vue的提示功能关闭

App.myType = 'app' // 声明组件类型为应用

const app = new vue(App)
app.$mount() // 挂载当前应用

编写一个首页

src下面创建一个pages/index文件夹

index.vue // 等同于原生中的wxml + wxss + js
main.js // 当前组件页面的入口文件，用于生成当前组件实例，并挂载组件
main.json // 当前页面的局部配置文件

index.vue组件最终会被转化为main.wxml以及main.wxss文件, 所以当前的json文件需命名main

先写一个简单的页面，试试康效果

本文地址：https://blog.csdn.net/weixin_36241537/article/details/107431541