基于mpvue+vant开发微信小程序
<h1><span style="font-family: "Microsoft YaHei"">1.小程序注册</span></h1><p><span style="font-family: "Microsoft YaHei"">进入微信公众平台 https://mp.weixin.qq.com/</span></p>
<p><span style="font-family: "Microsoft YaHei"">找一个邮箱注册一个小程序，流程参考。一个邮箱只能注册一个小程序</span></p>
<p><span style="font-family: "Microsoft YaHei"">参考：https://jingyan.baidu.com/article/8275fc865a14c346a03cf6e2.html</span></p>
<h1><span style="font-family: "Microsoft YaHei"">2.开发工具下载&安装</span></h1>
<p><span style="font-family: "Microsoft YaHei"">node下载安装</span></p>
<p><span style="font-family: "Microsoft YaHei"">vsocode下载安装 https://code.visualstudio.com/</span></p>
<p><span style="font-family: "Microsoft YaHei"; font-size: 14px">微信小程序工具</span></p>
<p><span style="font-family: "Microsoft YaHei"">https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</span></p>
<h1><span style="font-family: "Microsoft YaHei"">3.什么是MPVue</span></h1>
<p><span style="font-family: "Microsoft YaHei"; font-size: 14px"><code>mpvue</code> （github 地址）是一个使用 Vue.js 开发小程序的<strong>前端框架</strong>。框架基于 <code>Vue.js</code> 核心，<code>mpvue</code> 修改了 <code>Vue.js</code> 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 <code>Vue.js</code> 开发体验。</span></p>
<p id="实践案例"><span style="font-family: "Microsoft YaHei"; font-size: 14px">地址：http://mpvue.com/</span></p>
<div>
<div>
<p><span style="font-family: "Microsoft YaHei"; font-size: 14px">使用 <code>mpvue</code> 开发小程序的优势：</span></p>
<ul>
<li><span style="font-family: "Microsoft YaHei"; font-size: 14px"><code>开发Vue.js</code> 体验</span></li>
<li><span style="font-family: "Microsoft YaHei"; font-size: 14px">使用 <code>Vuex</code> 数据管理方案</span></li>
<li><span style="font-family: "Microsoft YaHei"; font-size: 14px">快捷的 <code>webpack</code> 构建机制：自定义构建策略、开发阶段 hotReload</span></li>
<li><span style="font-family: "Microsoft YaHei"; font-size: 14px">支持使用 npm 外部依赖</span></li>
<li><span style="font-family: "Microsoft YaHei"; font-size: 14px">使用 <code>Vue.js</code> 命令行工具 vue-cli 快速初始化项目</span></li>
</ul>
</div>
</div>
<h1><span style="font-family: "Microsoft YaHei"">4.vant Weapp</span></h1>
<p><span style="font-family: "Microsoft YaHei"">Vant Weapp 是<strong>移动端 Vue 组件库 </strong>Vant 的小程序版本</span></p>
<p><span style="font-family: "Microsoft YaHei"">https://github.com/youzan/vant-weapp</span></p>
<p><span style="font-family: "Microsoft YaHei"">https://youzan.github.io/vant-weapp/#/intro</span></p>
<h1><span style="font-family: "Microsoft YaHei"">5.创建一个项目</span></h1>
<h3><span style="font-family: "Microsoft YaHei""> 1.<span class="token comment">全局安装 vue-cli</span></span></h3>
<div class="cnblogs_code">
<pre>npm install --global vue-cli </pre>
</div>
<h3><span style="font-family: "Microsoft YaHei"">2.创建一个基于 mpvue-quickstart 模板的新项目(my-new-project)</span></h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">创建项目
vue init mpvue</span>/mpvue-quickstart my-project
<span style="color: rgba(0, 0, 0, 1)">
安装依赖
cd my</span>-<span style="color: rgba(0, 0, 0, 1)">project
npm install
启动项目
npm run dev</span></pre>
</div>
<p><span style="font-family: "Microsoft YaHei""><img src="https://img2018.cnblogs.com/i-beta/1444697/202002/1444697-20200218121517978-2128070966.png"></span></p>
<h3><span style="font-family: "Microsoft YaHei"">3.打开小程序开发工具，导入项目</span></h3>
<p><span style="font-family: "Microsoft YaHei""><img src="https://img2018.cnblogs.com/i-beta/1444697/202002/1444697-20200218140039158-965958669.png"></span></p>
<h3><span style="font-family: "Microsoft YaHei""> </span><span style="font-family: "Microsoft YaHei"">4.小程序预览 </span></h3>
<h3><span style="font-family: "Microsoft YaHei""><img src="https://img2018.cnblogs.com/i-beta/1444697/202002/1444697-20200218141206605-1313855707.png"><span style="font-family: "Microsoft YaHei""> </span></span></h3>
<h3><span style="font-family: "Microsoft YaHei"">5.下载vant-weapp</span></h3>
<p><span style="font-family: "Microsoft YaHei"">git clone git@github.com:youzan/vant-weapp.git</span></p>
<h3><span style="font-family: "Microsoft YaHei"">6.复制vant-weapp的dist文件夹到static文件夹，并且改名为vant</span></h3>
<p><span style="font-family: "Microsoft YaHei""><img src="https://img2018.cnblogs.com/i-beta/1444697/202002/1444697-20200218135518946-1936511816.png"></span></p>
<p><img src="https://img2018.cnblogs.com/i-beta/1444697/202002/1444697-20200218135623893-13084682.png"></p>
<h3><span style="font-family: "Microsoft YaHei"">7.首页看不到东西，控制控制台报错，打开微信开发者工具的“详情”右侧栏，有一个ES6转ES5选项，选中即可</span></h3>
<h3><span style="font-family: "Microsoft YaHei""><img src="https://img2018.cnblogs.com/i-beta/1444697/202002/1444697-20200218143154876-1667683466.png"></span></h3>
<h3><span style="font-family: "Microsoft YaHei"">8.在page/index添加一个main.json</span></h3>
<div class="cnblogs_code">
<pre><span style="font-family: "Microsoft YaHei""><span style="color: rgba(0, 0, 0, 1)">{
</span>"navigationBarTitleText": "首页"<span style="color: rgba(0, 0, 0, 1)">,
</span>"usingComponents"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"van-button": "../../static/vant/button/index"<span style="color: rgba(0, 0, 0, 1)">,
</span>"van-search": "../../static/vant/search/index"<span style="color: rgba(0, 0, 0, 1)">,
</span>"van-tabbar": "../../static/vant/tabbar/index"<span style="color: rgba(0, 0, 0, 1)">,
</span>"van-tabbar-item": "../../static/vant/tabbar-item/index"<span style="color: rgba(0, 0, 0, 1)">
}
}</span></span></pre>
</div>
<h3><span style="font-family: "Microsoft YaHei"">9.在index.vue添加</span></h3>
<div class="cnblogs_code">
<div><span style="font-family: "Microsoft YaHei""><van-button type="default">默认按钮</van-button></span></div>
<div><span style="font-family: "Microsoft YaHei""><van-button type="primary">主要按钮</van-button></span></div>
<div><span style="font-family: "Microsoft YaHei""><van-button type="info">信息按钮</van-button></span></div>
<div><span style="font-family: "Microsoft YaHei""><van-button type="warning">警告按钮</van-button></span></div>
<div><span style="font-family: "Microsoft YaHei""><van-button type="danger">危险按钮</van-button></span></div>
<div><span style="font-family: "Microsoft YaHei""> </span><span style="font-family: "Microsoft YaHei""> </span></div>
<div><span style="font-family: "Microsoft YaHei""><van-search placeholder="请输入搜索关键词" use-action-slot bind:search="onSearch"></span></div>
<div><span style="font-family: "Microsoft YaHei""><view slot="action" bind:tap="onSearch">搜索</view></span></div>
<div><span style="font-family: "Microsoft YaHei""></van-search><br></span></div>
</div>
<h3><span style="font-family: "Microsoft YaHei"">10.界面显示</span></h3>
<p><span style="font-family: "Microsoft YaHei""><img src="https://img2018.cnblogs.com/i-beta/1444697/202002/1444697-20200218144234957-537811520.png"> </span></p>
<h1><span style="font-family: "Microsoft YaHei"">6.代码</span></h1>
<p><span style="font-family: "Microsoft YaHei"">https://github.com/alvn1213/mpvue-demo </span> </p>
<h1><span style="font-family: "Microsoft YaHei"">7.参考</span></h1>
<p class="_1RuRku"><span style="font-family: "Microsoft YaHei"">使用mpvue开发小程序教程</span></p>
<p><span style="font-family: "Microsoft YaHei"">https://www.jianshu.com/p/6f8d74be3ff8</span></p>
<p><span style="font-family: "Microsoft YaHei""> </span></p>
<h1 class="_1RuRku"><span style="font-family: "Microsoft YaHei""> </span></h1>
<p><span class="token comment" style="box-sizing: border-box; outline: 0; margin: 0; padding: 0; overflow-wrap: break-word; color: rgba(92, 99, 112, 1); white-space: pre; font-family: "Microsoft YaHei"; font-style: italic !important; font-variant-numeric: normal !important; font-variant-east-asian: normal !important; font-stretch: normal !important; line-height: normal !important"> </span></p><br><br>
来源：https://www.cnblogs.com/feng123/p/12325442.html
頁:
[1]