小程序项目——小程序开发框架mpvue介绍、小程序项目初始化步骤、项目结构概述

小程序项目——小程序开发框架mpvue介绍、小程序项目初始化步骤、项目结构概述

小程序开发框架mpvue

mpvue 是一个使用 Vue.js 开发小程序的前端框架。【官网】

• 主要特性
  • 完整的 Vue.js 开发体验
  • 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

mpvue基本使用和初始化项目步骤

• 安装Node.js(版本号大于v8.9.0)
• 安装vue脚手架
  • npm install -g @vue/cli
  • npm install -g @vue/cli-init
• 初始化项目（最后的项目名称自定义）
  • vue init mpvue/mpvue-quickstart mytest
• 安装依赖包（进入到项目的目录中进行）
  • npm install
• 运行项目
  • npm run dev
• 项目要导入到小程序开发工具中，但是代码通过vscode或者sublime进行开发

项目结构概述

• 项目整体结构
  • src 项目源代码
    • pages 小程序的页面
    • components 通用的一些组件
    • utils 中用来放置一些通用的工具方法
    • main.js是入口js文件
    • App.vue是入口的组件文件
    • app.json是全局配置文件
  • dist 项目源代码编译之后生成的小程序代码（其实真正可以运行的代码就是这里的代码）
  • static 提供一些静态资源：比如图片
  • build和config都是webpack配置文件
  • index.html 这是项目唯一的页面