mpvue从懵懵到入门
2018-11-20 本文已影响0人
西瓜已经被占用
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
