精华内容
下载资源
问答
  • 点击观看视频 ↓↓↓搭建开发环境、创建mpvue项目https://www.zhihu.com/video/1195024159292559360课程文字版1、安装node.js环境打开node.js官网http://nodejs.cn/download/根据自己的电脑版本选择安装包安装完成后...

    da96fb620bf654d555fde3d0a50b113f.png

    点击观看视频 ↓↓↓

    756baeb7f4138ade8c790169228b909b.png
    搭建开发环境、创建mpvue项目https://www.zhihu.com/video/1195024159292559360

    课程文字版

    1、安装node.js环境

    打开node.js官网http://nodejs.cn/download/根据自己的电脑版本选择安装包

    安装完成后,可以命令行工具中输入 node -vnpm -v,如果能显示出版本号,就说明安装成功。

    ~$ node -v
    v11.7.0
    
    ~$ npm -v
    node.js是什么?
    Node.js是一个JavaScript的运行环境,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
    npm是什么?
    Node Package Manager翻译成中文就是node包管理器,安装node.js运行环境时会自动安装npm,后面我们通过npm来下载安装node相关的软件包


    2、将npm的源换成国内源

    由于npm的源在国外,国内用户下载软件包会比较慢,所以我们将npm的源换成国内的。

    #运行成功,不会返回任何信息
    ~$ npm set registry https://registry.npm.taobao.org/

    3、安装vue-cli脚手架

    ~$ sudo npm install -g vue-cli
    
    //安装成功后,系统返回的信息
    + vue-cli@2.9.6
    added 9 packages from 3 contributors, removed 3 packages and updated 102 packages in 22.949s
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │       New minor version of npm available! 6.5.0 → 6.11.1       │
       │   Changelog: https://github.com/npm/cli/releases/tag/v6.11.1   │
       │               Run npm install -g npm to update!                │
       │                                                                │
       ╰────────────────────────────────────────────────────────────────╯

    4、创建mpvue项目

    (1)创建名为truth_hold的mpvue项目

    我们不需要额外安装mpvue的工具,直接用vue官方的工具就可以了~运行vue init mpvue/mpvue-quickstart truth_hold创建mpvue项目,其中truth_hold是项目名称

    ~/WeChatProjects$ vue init mpvue/mpvue-quickstart truth_hold
    
    //系统返回消息
    ? Project name truth_hold   // 回车
    ? wxmp appid wx1537a4db01c83194 //这里需要写上你自己的Appid
    ? Project description A Mpvue project   // 回车
    ? Author xzn <[xzn@stonescloud.com](mailto:xzn@stonescloud.com)>   // 回车
    ? Vue build runtime   // 一直回车
    ? Use Vuex? Yes   //Y
    ? Use ESLint to lint your code? Yes  //Y
    ? 小程序测试,敬请关注最新微信开发者工具的“测试报告”功能

    (2)打开truth_hold文件,安装配置文件并启动

    //打开truth_hold文件
    ~/WeChatProjects$ cd truth_hold/
    
    //安装配置文件
    ~/WeChatProjects/truth_hold$ npm install
    
    //启动项目
    ~/WeChatProjects/truth_hold$ npm run dev
    //出现下面信息说明启动成功了
    DONE  Compiled successfully in 3913ms

    5、导入项目

    将刚刚创建的truth_hold项目文件导入到微信开发者工具中

    (1)打开微信开发者工具,点击菜单栏的项目--导入项目

    6a49977425551fdeb430944893f868ba.png

    (2)选择truth_hold项目所在的目录

    9b5e7d776f3257547f6f683aa4581781.png

    (3)导入项目后的界面

    2a73d94fad7e924785c74f4a9379d528.png

    6、mpvue小程序框架介绍

    在实际项目开发过程中,只需要操作src文件,系统会自动在dist文件中为我们生成原生小程序的目录结构

    09f6bc6a4c75c5c652d6495489be5794.png
    关注【猫宁一】公众号回复【课件】领取课程PPT和小程序源码
    B站可以1.5倍加速观看视频课程
    微信小程序实战开发课程【提供源码】实际上线项目 mpvue+koa2_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com
    b4e7c45a6cb711ddd1bc34a9ad8d07be.png
    展开全文
  • 刚刚开始接触小程序,准备采用mpvue框架进行学习开发,接下来就说说如何准备一个空的mpvue吧,像极了用脚手架创建一个空的vue一样。 具体操作以及详细api我们可以点开mpvue官网查看 第一步:找好存储位置创建一个空...

    刚刚开始接触小程序,准备采用mpvue框架进行学习开发,接下来就说说如何准备一个空的mpvue吧,像极了用脚手架创建一个空的vue一样。

    具体操作以及详细api我们可以点开mpvue官网查看

    第一步:找好存储位置创建一个空mpvue文件夹
    例如我想在D:\myDemo创建,那么在对应位置打开我们俗称的黑色小窗口:
    在这里插入图片描述
    在这里插入图片描述
    输入vue init mpvue/mpvue-quickstart my-project ,然后按回车就好。(my-project是文件名,你自定义)
    在这里插入图片描述
    然后就一路回车就好:
    在这里插入图片描述
    这时我们就创建一个基于 mpvue-quickstart 模板的新项目,之后就是安装依赖:
    cd my-project进入该文件,然后输入npm install下载依赖
    在这里插入图片描述
    安装完之前的所有东西后,最后想运行?输入npm run dev
    在这里插入图片描述
    呃?和想象的不一样?没有出现想vue一样的链接打开浏览器预览,其实小程序是不能在浏览器预览的,所以输入npm run dev只是会打包生成dist文件夹
    在这里插入图片描述
    那我们要如何运行预览呢?这时就要借助微信开发者工具了,也是在官网下载即可

    在开发者工具选择小程序打开刚创建的文件夹,打开模拟器就可以看到预览效果了。
    在这里插入图片描述

    展开全文
  • 一、安装cli-init. 当我们直接搭建脚手架时,如果没有安装cli-init会报错。因此,我们首先需要...1、基于mpvue-quickstart模板创建新项目 vue init mpvue/mpvue-quickstart my-project 在输入命令后,我们需要在...

    一、安装cli-init.

    当我们直接搭建脚手架时,如果没有安装cli-init会报错。因此,我们首先需要安装cli-init。使用如下命令可以直接安装。

    npm install -g @vue/cli-init
    

    二、搭建脚手架

    1、基于mpvue-quickstart模板创建新项目

    vue init mpvue/mpvue-quickstart my-project
    

    在输入命令后,我们需要在?行按下回车,表示同意。
    在这里插入图片描述

    2、安装依赖和运行

    cd my-project
    npm install
    npm run dev
    

    注:dev默认微信小程序
    之后我们在WebStorm中进行修改源码,在微信开发者工具中进行调试
    WebStorm链接:https://pan.baidu.com/s/1LSTruuV3NJ3ReMeckQSSpw
    提取码:7uun
    微信开发者工具链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    展开全文
  • vue项目转小程序-mpvue项目创建前言创建mpvue项目 前言 这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。 创建...

    vue项目转小程序-mpvue项目创建

    前言

    这次遇到了要拿很久之前用vue写的移动端项目,改成小程序的要求。因为本人只会用原生的开发微信小程序,所以这次也是学习了一下mpvue,现在来总结一下。

    创建mpvue项目

    mpvue是美团开源的项目,先贴上官方地址:http://mpvue.com/
    创建项目前先检查一下node和npm是否安装好,然后开始安装vue-cli脚手架,注意,这要2.x版本的,3.x版本的创建不了。

    $ npm install --global vue-cli@2.9
    

    安装完之后,初始化一个基于mpvue-quickstart模板的新项目

    $ vue init mpvue/mpvue-quickstart my-project
    

    没什么特别要求的话,基本上是一路回车就好
    创建完之后就是下载依赖,启动项目拉

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

    项目启动成功之后,目录会多了一个dist文件夹,就是把vue代码转成了小程序代码,把整个项目放到微信开发者工具就可以预览拉。

    项目创建的时候一般都有px2rpx-loader的,所以写项目的时候可以直接用px,然后编译的时候会转成rpx。
    众所周知,vue项目是用的vue-router,怎么在mpvue中用vue-router和引入第三方ui组件呢,请看小编的其他文章!

    展开全文
  • 第19课 微信小程序安装使用mpvue脚手架: 详情地址:http://mpvue.com/mpvue/quickstart/ 安装前检查环境: 安装脚手架之前需要电脑已安装node与npm 首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口 进入...
  • 基于mpvue创建微信小程序项目

    千次阅读 2021-08-28 11:38:51
    1.创建项目执行命令:vue init mpvue/mpvue-quickstart my-project; 2.进入创建项目的目录下,cd my-project; 3.安装依赖包,npm install; 4.npm run dev; 5.编译项目,npm run build 6.打开微信开发者工具,选择...
  • Mpvue是什么? Mpvue一个基于Vue的微信小程序前端框架,可以让我们用vue的语法写小程序的项目。 mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 ...
  • 目前mpvue框架使用的是vue2.x,所以需要使用vue2.x的脚手架 npm install -g vue-cli 搭建mpvue脚手架 基于mpvue-quickstart模板创建新项目 // my-project 为创建的项目名 vue init mpvue/mpvue-quickstart my-...
  • mpvue快速搭建

    2019-12-04 19:47:35
    mpvue快速搭建 全局安装vue-cli,以管理员的身份运行cmd,命令:npm install --global vue...创建mpvue项目命令:vue init mpvue/mpvue-quickstart my-project 然后就成功创建了,按照提示进入文件夹并运行。over ...
  • mpvue基本使用

    2019-10-02 14:45:00
    ## 什么是mpvue ## -美团开发使用vue语法开发小程序的...## 创建mpvue项目 ## 1.必须安装node.js 2.安装vue脚手架npm install -g vue-cli 3.创建项目,找到项目目录运行:vue init mpvue/mpvue-quickstart mym...
  • Mpvue介绍

    千次阅读 2019-08-31 16:12:50
    Mpvue是什么? Mpvue是一个基于Vue的微信小程序前端框架,可以让我们用vue的语法写小程序的项目。简单来说就是,以前我们写微信小程序,必须借助微信小程序的开发者工具,微信开发工具提供的语法才能写小程序,Mpvue...
  • 创建一个基于 mpvue-quickstart 模板的新项目 vue init mpvue/mpvue-quickstart 项目名称 然后按照提示运行: 中间会询问一下问题:前面几项直接回车 直到:询问是否安装 vuex 和 ESLint,根据需要安装即可。 其余...
  • 微信小程序搭建mpvue项目过程 第一步:安装Node环境 下载node.js安装包 下载地址:node.js中文网 ...安装vue-cli脚手架(vue-cli是vue框架的脚手架)并创建项目 cmd下输入 npm install vue-cli -g下载
  • 申请小程序 ...创建mpvue模板。 npm install 加载依赖, npm run dev编译运行项目, 打开微信开发者工具,导入项目,路径指向dist/wx 就是用hbuilderx,编写mpvue项目, 用微信开发者工具来调试运行。 ...
  • mpvue小程序

    2020-09-09 22:09:59
    1、搭建mpvue脚手架 第一步,基于mpvue-quickstart模板创建新项目 vue init mpvue/mpvue-quickstart my-project 第二步,安装依赖和运行 cd my-project npm install npm run dev 2、打开微信开发者...
  • 基本介绍 用vue.js写各种小程序,但是不支持h5 学习的目的: 掌握一个新的框架 mpvue是基于vue脚手架2.x eslint的使用 mpvue已经2年没有维护了 07.mpvue快速上手 传送门 01.初始化mpvue项目 #1.先确认你的npm源是...
  • 搭建mpvue

    2019-01-17 17:52:02
    1、采用mpvue 官方脚手架搭建项目底层结构 2、采用Fly.js 作为http请求库 3、引入 mpvue-router-patach ,以便在mpvue小程序中能使用vue-router的写法 目录结构 ├── src // 我们的项目的源码编写文件 │ ...
  • npm install --global vue-cli vue脚手架 ...创建一个基于mpvue-quickstart的新摸板 在此我们需要命名我们的项目名称 我们开发小程序的appid, vux可选择性安装, ESl...
  • 使用mpvue开发小程序教程(一)

    千次阅读 2019-08-22 15:41:59
    【原文地址】mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使用mpvue开发小程序教程(三...
  • 使用Vue开发微信小程序:mpvue框架

    千次阅读 2019-08-22 17:00:11
    【原文地址】mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使用mpvue开发小程序教程(三...
  • 1、安装脚手架 npm install --global vue-cli 2、创建项目 vue init mpvue/mpvue-quickstart YourProjectName 3、cd 到项目里面安装依赖 cd YourProjectName 4、安装依赖 cnpm install 5、安装less cnpm install...
  • mpvue构建小程序一

    2019-03-22 10:59:48
    2:vue init mpvue/mpvue-quickstart my-project(创建项目) 官方链接:http://mpvue.com/mpvue/#_14 3:mpvue生命周期: onLoad,监听页面加载 onShow,监听页面显示 onReady,监听页面初次渲染完成 onHide...
  • 1、搭建Mpvue项目

    2020-02-27 12:24:37
    一、Mpvue介绍 ...安装脚手架 npm install --global vue-cli / cnpm install --global vue-cli 创建项目 vue init mpvue/mpvue-quickstart myvue cd到项目里面安装依赖 cd myvue npm i...
  • mpvue初始化项目,npm run dev后没反应

    千次阅读 2018-09-21 17:35:39
    使用vue-cli脚手架创建一个新的mpvue项目后,npm i安装好包后,npm run dev会没反应,是因为官方更新了mpvue-loader。这个时候不是没反应,而是反应比较慢,等个一两分钟,dist目录就生成啦。 ...
  • 文章目录一、mpvue介绍二、搭建mpvue脚手架main.js三、mpvue原理四、mpvue生命周期Vue生命周期小程序生命周期小程序应用生命周期小程序页面生命周期 mpvue入门 | 慕课网「小慕读书」官网 一、mpvue介绍 官网:...
  • 1 mpVue是什么 1.1 简介 美团工程师推出的基于Vue.js封装的用于开发小程序的框架 融合了原生小程序和Vue.js的特点 ...npm install vue-cli -g 下载vue脚手架 vue init mpvue/mpvue-quickstart my-project
  • 创建mpvue项目 安装脚手架 npm install vue-cli -g 创建基于mpvue的项目 选项全部回车Yes,ESLint 选 No vue init mpvue/mpvue-quickstart firstapp VScode 打开项目,执行 cnpm install 安装依赖 npm run dev ...
  • mpvue学习笔记

    2019-01-10 10:40:00
    mpvue的特点 彻底的组件化开发能力:提高代码复用性 完整的 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 409
精华内容 163
关键字:

脚手架创建mpvue

vue 订阅