赞
踩
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。mp 即 mini program 的缩写。
① 通过脚手架引入mpvue模板
vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤引入mpvue模板了
- npm install -g @vue/cli-init
-
- vue init mpvue/mpvue-quickstart my-project
-
- cd my-project
-
- npm install
-
- npm run dev
npm run dev命令会在项目根目录下生成一个dist目录,其就是将vue的项目转换为微信小程序项目
② 搭建小程序的开发环境
微信提供了一个专门微信开发者工具用于开发小程序,需要下载安装微信开发者工具,同时还需要申请一个小程序ID,即AppID,因为通过微信开发者工具创建小程序项目需要填入AppID,可以在微信公众平台申请得到。
③ 调试项目
通过微信开发者工具启动微信小程序项目,选择的项目目录是mpvue项目的根目录,而不是生成的dist目录,由于微信开发者工具不支持.vue文件的查看,所以我们还是要用自己的开发工具调试源码。
① mpvue的src目录下和vue一样,也有一个App.vue根组件,App.vue根组件只是一个结构,无具体内容,根组件有对应的main.js文件用于渲染App.vue根组件,即引入App.vue并作为Vue构造函数创建Vue实例,然后mount,还有一个app.json文件,即页面全局配置文件,用于页面的注册、tabBar的注册、全局window样式设置,如:
- // App.vue
-
- <script>
-
- export default {
-
- }
- </script>
-
- <style>
- page {
- width: 100%;
- height: 100%;
- background-color: #f7f7f7;
- }
- </style>
- // main.js
-
- import Vue from 'vue'
- import App from './App'
- Vue.config.productionTip = false
- App.mpType = 'app'
-
- const app = new Vue(App)
- app.$mount()
- // app.json
-
- {
- "pages": [
- "pages/index/main"
- ],
- "tabBar": {
- ......
- },
- "window": {
- "backgroundColor":"#00BFFF",
- "backgroundTextStyle": "light",
- "navigationBarBackgroundColor": "#fff",
- "navigationBarTitleText": "测试",
- "navigationBarTextStyle": "black"
- }
- }

② mpvue中定义的页面都放在src目录下的pages目录里面,一个页面对应一个文件夹,每个页面文件夹内需要有一个.vue文件和main.js文件,main.js主要做的就是,引入当前页面对应的.vue,然后作为Vue构造函数的参数创建Vue实例并mount,并且main.js的名称不能改变,只能是main.
// main.
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。