微信mpvue开发项目构建

一、安装开发环境

        1） node.js

            下载地址：https://nodejs.org/en/download/   安装完成后，打开你的命令行输入如下命令，验证安装是否成功：

            node --version  //成功则会输出相应版本

            安装成功之后即npm安装成功，由于国外环境安装速度较慢，可以切换到国内的淘宝镜像来提高效率

             npm set registry https://registry.npm.taobao.org/

二、开发环境安装成功之后我们需要安装开发依赖 

        1）vue-cli

            vue-cli是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码，

            cnpm install vue-cli -g

        2）下载微信开发者工具，调试和模拟运行微信小程序

            下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

三、创建机遇mpvue的小程序项目

    1）快速构建mpvue小程序项目，按照命令行的引导一路回车：

        结束之后会在我的F盘下面的test文件下新建一个vuetest的文件，即我们项目文件地址，在这个过程中vue帮我们下载了一份注册名为    mpvue/mpvue-quickstart的模板代码，然后根据开发者在命令行提示过程中输入的信息，生成一份经过配置后的代码。安装成功之后我们还需要对项目安装开发所需要的依赖：

        结束之后开发所需要的依赖环境就自动安装在了vuetest下（node_modules），执行以下代码即可将项目运行起来：

        成功运行之后项目就可以进入开发模式，一但源代码发生变化就会触发自动编译，可以用正常的vue语句开发，但最终还需要转换成小程序的的代码才可以在微信小程序环境下运行，编译后的代码会在dist目录下：：

cnpm run build

运行查看结果，打开微信开发者工具——>新建项目

        项目目录选择我们刚刚新建的vuetest目录，若无AppID则可使用测试号：

        点击导入则可进入小程序开发界面：

        左侧为运行结果，右侧可以查看小程序源码

三、mpvue小程序页面构成

    1）src目录

        src目录下是我们编写程序的目录文件，默认生成的模板已经给我们创建了三个文件夹作为参考案例，可以参考这里面的逻辑代码自己来编写自己的风格

        components：一般我们会将公共的模板或者说重复较多的部分提取成vue组件存放在这里

        pages：存放小程序的页面

        utils：可选（可删）。可以将代码中一些公用工具函数组织成模块放入该目录下

        main.js + App.vue：这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体。

    2）config目录

        config目录下包含了用于开发和生产环境下的不同配置，dev.env.js用于开发环境，prod.env.js用于生产环境，可以将开发阶段和生产阶段不一样的信息配置到这两个文件中去，比如说后台请求的api地址，图片地址等，然后在代码中以变量的形式进行引用：

        // dev.env.js

module.exports = merge(prodEnv, {

  NODE_ENV: '"development"',

  BASE_URL: '"http://xxxx/api"'

})

// prod.env.js

module.exports = {

  NODE_ENV: '"production"',

  BASE_URL: '"http://xxxxadd/api"'

}

        后面在使用api接口的时候可以直接使用：

const baseURL = process.env.API_BASE_URL

wx.request({url:`${baseURL}/xxx`})

    3）build目录

        build目录下是一些用于项目编译打包的node.js脚本和webpack配置文件。一般情况下不需要修改这些文件。

    4)static目录

        主要存放一些静态资源，比如图片、文本文件等

四、小程序入口

    1）app.json

        app.json是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。

    2）App.vue

        App.vue组件中可以编写小程序的生命周期方法（通常使用Vue的生命周期方法，但也兼容原生的生命周期方法），也可以在其中加入小程序的全局样式

    3）其他页面

        我们新建一个名为index的子目录（请遵循每个页面放入一个子目录的良好习惯），然后在该子目录下，新建2个文件：一个用于实现页面主体功能的index.vue组件，另一个则用于将这个页面组件生成Vue实例并加载的main.js。以后的每一个mpvue页面组件都会拥有这样的结构。然后在main.js中编写如下代码，非常简单的一段代码，它的功能是引入index.vue并创建Vue实例：

import Vue from 'vue'

import App from './index'

const app = new Vue(App)

app.$mount()