快速初始化一个mpvue 项目原创
金蝶云社区-honey缘木鱼
honey缘木鱼
6人赞赏了该文章 747次浏览 未经作者许可,禁止转载编辑于2019年02月27日 15:05:05

 mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。


mpvue特性:



一. 开发环境

  1. 检查下 Node.js 是否安装

node -v

已安装

已安装

2.检查npm是否安装

npm -v

已安装

已安装

  1. 切换源为 taobao 源

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

4.全局安装 vue-cli

npm install --global vue-cli@2.9


二. 创建mpvue项目
1.项目路径

cd '你想保存的路径'//cd /Users/zj/Desktop/新建mpvue项目(以桌面为例)
  1. 创建一个基于 mpvue-quickstart 模板的新项目

vue init mpvue/mpvue-quickstart my-project
  1. 如图所示:



三. 安装项目依赖

cd my-project
npm install
npm run dev
  1. 执行cd my-project 进入项目

  2. 执行npm install命令后,项目文件中多了node_moudules文件夹

    

031A3496-1C7E-44D0-B2A3-4937D94C75FD.png

 3.npm run dev执行完成后,本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。

   




四. 运行项目

1.用微信开发者工具打开



2.编译后效果图

屏幕快照 2019-02-15 上午11.00.15.png


注:


  1. 在npm install --global vue-cli@2.9时如果报错如下图所示:



解决方案:

1. cd  /usr/local/lib/node_modules/
2. open /usr/local/lib/node_modules/
3. 删除vue-cli文件夹
4. npm install --global vue-cli@2.9


2. 在输入项目名称时报错



解决方案:
项目名称字符要小写,不能大写


3.假如 node.js 没有安装

  1. 到[node官网](https://nodejs.org/en/download/) 选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可。 
  2. 检查下 Node.js 是否安装 node -v


本篇独发金蝶云社区

图标赞 6
6人点赞
还没有人点赞,快来当第一个点赞的人吧!
图标打赏
0人打赏
还没有人打赏,快来当第一个打赏的人吧!