之前开发前端项目基本用Vue.js比较多,算是对这个框架比较喜欢。一直就打算用mpvue写一款小程序,现在终于开始行动了:v:

初始化项目

开发环境依赖于node,如果没有的话请先安装。 (下载地址 https://nodejs.org/en/download/)

  1. # 1. 先检查下 Node.js 是否安装成功
  2. $ node -v
  3. v8.9.0
  4. $ npm -v
  5. 5.6.0
  6. # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
  7. $ npm set registry https://registry.npm.taobao.org/
  8. # 3. 全局安装 vue-cli
  9. # 一般是要 sudo 权限的
  10. $ npm install --global vue-cli@2.9
  11. # 4. 创建一个基于 mpvue-quickstart 模板的新项目
  12. # 这一步可以设置你的项目配置 新手一路回车选择默认就可以了
  13. $ vue init mpvue/mpvue-quickstart codehui
  14. # 5. 安装依赖,走你
  15. $ cd codehui
  16. $ npm install
  17. # 6. 构建项目
  18. $ npm run dev

如果显示这样就代表成功了。运行完发现项目了多了个dist目录,这个就是经过编译的小程序代码。

目录结构

  1. codehui #项目目录
  2. ├── package.json #mpvue项目配置文件
  3. ├── project.config.json #小程序项目配置文件
  4. ├── static #存放静态资源
  5. ├── dist #存放小程序代码的目录
  6. | ├── wx #小程序的代码 部署时候用
  7. ├── src #开发目录
  8. ├── components #vue组件目录
  9. ├── pages #小程序页面目录
  10. ├── utils #公共方法存放
  11. ├── App.vue #入口文件
  12. └── main.js #入口文件
  13. ├── config #配置目录
  14. ├── index.js #定义开发环境和生产环境中所需要的参数
  15. ├── dev.env.js #开发环境配置
  16. └── prod.env.js #生产环境配置
  17. └── build #node和webpack相关文件 无需修改

开始使用

  1. 打开微信开发者工具(点我下载),选择新增项目,选择刚才新建项目的地址,点击确定就进入模拟器。

然后就会看到我们的小程序运行的界面了

继续阅读 《mpvue开发小程序基本配置》

扫码体验小程序

微信扫码体验小程序