快速初始化一个mpvue 项目

红太狼 2022-04-24 12:10 207阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

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

`mpvue特性：`

![Image 1][]

**一. 开发环境**

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

node -v

![Image 1][]

已安装

2.检查npm是否安装

npm -v

![Image 1][]

已安装

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.  如图所示：
    
     
    
    ![Image 1][]

**三. 安装项目依赖**

cd my-project
    npm install
    npm run dev

![Image 1][]

**四. 运行项目**

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

![Image 1][]

2.编译后效果图

![Image 1][]

**注**：

1.  在npm install --global vue-cli@2.9时如果报错如下图所示：
    
     
    
    ![Image 1][]

解决方案：

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

1.  在输入项目名称时报错
    
     
    
    ![Image 1][]

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

1.  假如 node.js 没有安装

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

作者：honey缘木鱼  
链接：https://www.jianshu.com/p/29e9834be531

[Fundebug]: https://www.fundebug.com/
[Vue.js]: https://vuejs.org/
[runtime]: http://mpvue.com/mpvue
[compiler]: http://mpvue.com/mpvue-template-compiler
[Image 1]:

快速初始化一个mpvue 项目

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关阿里云快速初始化SpringBoot、SpringCloud项目

相关 mpvue项目使用 mpvue-router-patch插件不生效

相关 Vue之初始化一个vue项目

相关 mpvue快速搭建

相关快速初始化一个electron+react桌面应用项目

相关 ⑤mpvue 小程序框架：初始化项目分析项目结构

相关 Express初始化一个项目&git提交一个项目

相关快速初始化一个mpvue 项目

相关框架开发小程序_快速上手mpvue项目

相关快速上手mpvue 项目