mpvue系列（一）：构建新项目

mpvue怎么创建新项目？

1、安装node环境。

2、全局安装vue-cli。

3、创建新项目文件夹。

4.安装依赖。

5.运行。

1、安装node环境。

1.1、打开命令提示符?

（1）window+R

（2）.输入cmd

1.2、window系统没有的话怎么安装？

（1）下载.msi文件x32位（看电脑多少位，官网下载对应的，以x32为例）

（2）直接双击安装

（3）重启cmd

（4）.node -v查看

1.3、cnpm怎么安装？

（1）安装cnpm -->npm i -g cnpm --registry=https://registry.npm.taobao.org

1.4、cnpm报错？

（1）npm set registry https://registry.npm.taobao.org（注册模块镜像）

（2）npm set disturl https://npm.taobao.org/dist node-gyp（编译依赖的 node 源码镜像）

（3）npm cache clean --force（ 清空缓存）

（4）npm install -g cnpm --registry=https://registry.npm.taobao.org

2、全局安装vue-cli。

（1）npm install --g vue-cli  全局安装

（2）vue -V  检查

3、创建新项目文件夹。

（1）.vue init mpvue/mpvue-quickstart test-wxapp  （test-wxapp 是自定义的文件名）

4、安装依赖。

（1）进入项目 cd test-wxapp

（2）npm i 安装依赖

5、运行。

（1）npm run dev 运行程序

（2）打开开发者工具，项目目录填当前项目的dist文件夹。

5.1、开发者工具下载？

（1）登录微信公众平台

（2）首页-->开发工具-->点连接跳转下载

5.2、 怎么获取appID?

（1）微信公众平台-->设置-->开发设置

5.3、mpvue项目文档目录结构？

- node_modules  安装依赖包

- dist  您启动和打包应用程序时，Titanium为应用程序做准备的地方,(编译成小程序代码的地方)

- src  vue代码处

- main.js    项目配置文件，config字段就是小程序的全局配置

- index.html  挂载入口

- utils/index.js  工具函数

5.4、新项目下的文件整理？

（1）/src/pages 下面的counter和logs两个文件夹删掉

（2）/src/components 文件夹下面的文件也全删掉

（3）src/main.js 里面的 config.pages里面多余的路由也删掉，只保留一条['^pages/index/main']

（4）新增的页面需要重新 npm run dev 来进行编译

---

点赞的人都是最美的人！！