mpvue开发小程序（一）基础架构

骑猪看日落 2022-04-12 12:57 199阅读 0赞

小程序api地址：https://developers.weixin.qq.com/miniprogram/dev/api/  
mpvue-weui（常用地址）：https://kuangpf.com/mpvue-weui/\#/README

[mpvue 官方文档： http://mpvue.com/mpvue/quickstart/\#2][mpvue _ http_mpvue.com_mpvue_quickstart_2]

mpvue是新出的用vue的语法开发微信小程序的前端框架，经过实际开发还是比较好用的。最大的特点是，对于先开发vue项目，后开发该项目的小程序版本来说机具便利。

### 1. 初始化一个 mpvue 项目 ###

现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 [nodejs][] 并安装。

然后打开命令行工具：

# 1. 先检查下 Node.js 是否安装成功
    $ node -v
    v8.9.0
    
    $ npm -v
    5.6.0
    
    # 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
    $ npm set registry https://registry.npm.taobao.org/
    
    # 3. 全局安装 vue-cli
    # 一般是要 sudo 权限的
    $ npm install --global vue-cli@2.9
    
    # 4. 创建一个基于 mpvue-quickstart 模板的新项目
    # 一路回车选择默认就可以了
    # 注意：在是否选择eslint的地方，打n,回车，表示不用eslint严格语法
    $ vue init mpvue/mpvue-quickstart my-project
    
    # 5. 安装依赖，走你
    $ cd my-project
    $ npm install
    $ npm run dev

2.安装微信开发者工具，新建项目的地址就是就是刚刚创建的项目目录（非 dist 目录）

3.到此，上手完毕。

注意：新增的页面需要重新 `npm run dev` 来进行编译

[mpvue开发小程序（二）环境配置][mpvue]

[mpvue _ http_mpvue.com_mpvue_quickstart_2]: http://mpvue.com/mpvue/quickstart/#2
[nodejs]: https://nodejs.org/
[mpvue]: https://blog.csdn.net/tan9374/article/details/84768595