mpvue从懵懵到入门

1.准备工作

成功安装node
成功安装npm
成功安装vue-cli（全局安装）
安装方法参考：https://www.baidu.com/

2.安装一个mpvue-quickstart模板

(1).在你喜欢的任意位置新建一个文件夹，我的在D盘code文件夹下，取名studympvue（以后可以把所有的mpvue项目全都放在这个文件夹里面）
(2).打开cmd：执行一下命令，先切换到D盘

d:

image.png

(3).然后执行以下命令，进入到studympvue文件夹下

cd code/studympvue

image.png

(4.)进入文件夹后在该文件夹下，执行以下命令来创建mpvue项目

vue init mpvue/mpvue-quickstart mpvue-project

image.png

(5).接下来会让你填写如下配置，前五项直接用默认的就可以（点enter），Use Vuex（状态管理能用到的话就选y），Use ESLint to lint your code？n（初学者一定要选nonono，选yes的苦不想让你们再承受）

image.png

现在你的文件夹中已经成功创建了mpvue-project项目

image.png

(6).进入到mpvue-project文件夹

cd mpvue-project

image.png

(7).在mpvue-project文件夹下，下载依赖

npm install

image.png

(8).现在你的项目已经完全创建完毕了，编译一下

npm run dev

image.png

(9).打开你的微信web开发者工具，选择新建项目
项目目录

image.png

image.png

(10).现在你就可以看到你的第一个mpvue的项目的页面了

image.png

38a38be907c440ffa7d5b6d88287465a20180113093201.gif

小程序开发工具还不支持打开vue文件，如果你想修改你的项目内容只需要打开你的sublime、webstorm、Hbuilder等任意开发工具导入mpvue-project就可以啦

image.png

c7b35d7246d84e8a9e7264a95012a279.gif