微信小程序> 微信小程序接入UI框架

微信小程序接入UI框架

浏览量:667 时间: 来源:GC怪兽

作为一个微信小程序开发者半年,开发过几个小程序。但是页面总是不尽人意,所以现在接入UI框架(以mpvue为例)

1. 初始化一个 mpvue 项目

打开命令行工具:

1、 先检查下 Node.js 是否安装成功

$ node -v
v10.15.0

$ npm -v
6.4.1

2、由于众所周知的原因,可以考虑切换源为 taobao 源

$ npm set registry https://registry.npm.taobao.org/

3、 全局安装 vue-cli
一般是要 sudo 权限的

$ npm install --global vue-cli@2.9

4、创建一个基于 mpvue-quickstart 模板的新项目
新手一路回车选择默认就可以了

$ vue init mpvue/mpvue-quickstart my-project

5、安装依赖

$ cd my-project
$ npm install
$ npm run dev

随着运行成功的回显之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。

2、调试开发 mpvue

选择 小程序项目 并依次填好需要的信息:

  • 项目目录:就是刚刚创建的项目目录(非 dist 目录)
  • AppID:没有的话可以点选体验“小程序”,只影响是否可以真机调试。
  • 项目名称。

小程序

确认->整个 mpvue 项目已经跑起来了(如下图)
小程序

用自己趁手的编辑器(或者IDE)打开 my-project 中的 src 目录下的代码试试
小程序

到此,上手完毕

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎