使用mpvue创建小程序(1)

Mpvue是什么?
	Mpvue一个基于Vue的微信小程序前端框架,可以让我们用vue的语法写小程序的项目。
	
	mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

	官网:http://mpvue.com/
Mpvue是哪个公司的?
	美团旗下产品:美团汽车票 和 美团充电使用,此外,正有一大批小程序正在接入中。
Mpvue未来的目标?
	在未来最理想的状态是,可以一套代码可以直接跑在多端:WEB、小程序(微信和支付宝)、Native(借助weex)

	期待Mpvue做的更好...
创建Mpvue的项目?
	http://mpvue.com/mpvue/quickstart/

	1、必须按照nodejs

	2、安装vue脚手架 npm install --global vue-cli   / cnpm install --global vue-cli  (如果以前安装过可以忽略,只需要安装一次)

	3、创建项目   找到项目目录运行命令 :  vue init mpvue/mpvue-quickstart mympvue01

	4、cd 到项目里面安装依赖     cd mympvue01

	5、cnpm install  /  npm install

	6、npm run dev  就可以把创建的vue项目转化成小程序的项目

导入到小程序里面。
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序Vue是两种不同的前端开发框架,不能直接在小程序使用Vue小程序使用的是WXML和WXSS作为模板语言和样式语言,其中WXML基本上是HTML的子集,而WXSS则类似于CSS。如果你想在小程序使用Vue,你需要使用一个叫做mpvue的框架,它可以让你使用Vue的语法来开发小程序mpvue的底层原理是将Vue的代码转换成小程序的代码,从而实现在小程序使用Vue。 下面是使用mpvue创建小程序的步骤: 1. 安装mpvue脚手架工具 ```bash npm install -g vue-cli vue init mpvue/mpvue-quickstart my-project cd my-project npm install npm run dev ``` 2. 在src目录下创建Vue组件 ```vue <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello mpvue!' } } } </script> ``` 3. 将Vue组件转换成小程序组件 ```javascript <config> { "component": true } </config> <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello mpvue!' } } } </script> <style> div { color: red; } </style> ``` 4. 在小程序页面中使用Vue组件 ```vue <template> <div> <my-component></my-component> </div> </template> <script> import MyComponent from '@/components/MyComponent' export default { components: { MyComponent } } </script> ``` 以上就是在小程序使用Vue的基本步骤。需要注意的是,mpvue虽然可以让你使用Vue的语法来开发小程序,但是小程序的API和Vue的API是不同的,需要自己去学习小程序的开发文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值