欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

小程序开发 mpvue

程序员文章站 2022-06-28 15:15:56
小程序开发 mpvue简介1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点,可完全组件化开发特点1.拥有vuejs开发体验,组件化开发2.webpack构建项目3.h5转化工具将项目编译成小程序识别的文件初始化项目和初始化一个PC vue项目类似npm install vue-cli -gvue init mpvue/mpvue-quickstart my-projectcd my-projectnpm installnpm...

小程序开发 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文件夹,编码

小程序开发 mpvue

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文件夹
小程序开发 mpvue

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

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

先写一个简单的页面,试试康效果
小程序开发 mpvue

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