起手式,必要的開發(fā)環(huán)境
1) . 確認(rèn)是否安裝node環(huán)境
現(xiàn)在,前端工具鏈基本都依賴Node.js , 安裝地址:https://nodejs.org/en/download/
安裝完成之后,在你的桌面右鍵點擊桌面,打開你的命令行工具 , 查看是否安裝成功
然后我們切換成淘寶鏡像源 ,?npmsetregistry https://registry.npm.taobao.org/
2).安裝vue-cli腳手架工具套菜,可以快速創(chuàng)建vue項目骨架代碼件豌,我們可以通過安裝node.js后里面包含的npm工具來安裝vue-cli耍属,在命令行輸入如下命令:
檢查是否安裝成功可以使用命令 vue?
3).下載微信開發(fā)者工具
這個工具是開發(fā)、調(diào)試和模擬運行微信小程序的最核心的工具了,所以必須安裝茫虽。
下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
4).創(chuàng)建第一個基于mpvue的小程序項目?vue init mpvue/mpvue-quickstart firstapp
上面這里選項如果不明白可以直接Enter即可
5).安裝完成之后桌面會多了一個你剛剛所創(chuàng)建的文件夾
6).命令行cd firstapp進(jìn)入文件夾內(nèi)
7).輸入 npm i 安裝依賴
8).然后使用編輯器打開整個文件夾
可以看到整個文件的結(jié)構(gòu)如下, 下面我們要修改一下配置
點擊打開這個配置文件
然后修改這個配置項
在這個配置文件這里把miniprogramRoot的路徑修改為"./dist/wx",這里假如不修改的話,會報app.json文件入口沒找到,這是因為我們生成的文件路徑dist里面還有一層wx文件夾.
然后再下面幾行找到appid,替換掉這個appid
9).然后在命令行輸入 npm run dev
10).打開小程序開發(fā)者工具
添加你剛剛創(chuàng)建的項目
項目目錄指向你剛剛創(chuàng)建的文件夾然后確定即可
這樣就代表項目創(chuàng)建成功了, 接下來就可以開始擼代碼了