起手式,必要的开发环境
1) . 确认是否安装node环境
现在,前端工具链基本都依赖Node.js , 安装地址:https://nodejs.org/en/download/
安装完成之后,在你的桌面右键点击桌面,打开你的命令行工具 , 查看是否安装成功
然后我们切换成淘宝镜像源 , npmsetregistry https://registry.npm.taobao.org/
2).安装vue-cli脚手架工具,可以快速创建vue项目骨架代码,我们可以通过安装node.js后里面包含的npm工具来安装vue-cli,在命令行输入如下命令:
检查是否安装成功可以使用命令 vue
3).下载微信开发者工具
这个工具是开发、调试和模拟运行微信小程序的最核心的工具了,所以必须安装。
下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
4).创建第一个基于mpvue的小程序项目 vue init mpvue/mpvue-quickstart firstapp
上面这里选项如果不明白可以直接Enter即可
5).安装完成之后桌面会多了一个你刚刚所创建的文件夹
6).命令行cd firstapp进入文件夹内
7).输入 npm i 安装依赖
8).然后使用编辑器打开整个文件夹
可以看到整个文件的结构如下, 下面我们要修改一下配置
点击打开这个配置文件
然后修改这个配置项
在这个配置文件这里把miniprogramRoot的路径修改为"./dist/wx",这里假如不修改的话,会报app.json文件入口没找到,这是因为我们生成的文件路径dist里面还有一层wx文件夹.
然后再下面几行找到appid,替换掉这个appid
9).然后在命令行输入 npm run dev
10).打开小程序开发者工具
添加你刚刚创建的项目
项目目录指向你刚刚创建的文件夹然后确定即可
这样就代表项目创建成功了, 接下来就可以开始撸代码了