用vue来开发小程序项目详解,极大方便了开发者

案例图:
用vue来开发小程序项目详解,极大方便了开发者_第1张图片
五分钟教程:
通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目:

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

接下来,你只需要启动微信开发者工具,引入项目即可预览到你的第一个 mpvue 小程序。
注意引入的是dist文件夹:
用vue来开发小程序项目详解,极大方便了开发者_第2张图片

工作原理:
1.mpvue 保留了 vue.runtime 核心方法,无缝继承了 Vue.js 的基础能力
2.mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力
3.修改了 vue 的建构配置,使之构建出符合小程序项目结构的代码格式: json/wxml/wxss/js 文件
http://mpvue.com/mpvue/#_2
主要是修改了components文件里的,然后在对应的文件夹中import出来:
用vue来开发小程序项目详解,极大方便了开发者_第3张图片

这个框架是新出的,还有挺多东西需要优化,具体的东西也说不了多少,但这样确实方便了那些之前没有学过微信小程序的开发者。
持续更新地:https://github.com/Meituan-Dianping/mpvue

你可能感兴趣的:(微信小程序,vue项目开发)