在實際開發(fā)中，我們知道Hbuilder寫代碼和調試非常麻煩，換到我們的vscode，快捷鍵那些，界面插件調試，那叫一個舒服

輸入這個

1、全局安裝vue腳手架 

   npm install @vue/cli -g 

2.查看node-v版本號，我的是16，就沒啥問題

3.輸入這個命令

vue create -p dcloudio/uni-preset-vue my-project

如果不連連接也很正常，因為沒有科學上網，所以自己去github官網下個模板就行了

教大家一種簡單的方法

如果是創(chuàng)建vue3.0 + vite + javascript的uni-app項目，直接在瀏覽器打開 https://github.com/dcloudio/uni-preset-vue 切換到vite分支下載zip后綴的壓縮文件，解壓到本地就可以了。

2、如果是創(chuàng)建vue3.0 + vite + typescript的uni-app項目，直接在瀏覽器打開 https://github.com/dcloudio/uni-preset-vue 切換到vite-ts分支下載zip后綴的壓縮文件，解壓到本地就可以了。

我選擇了 這個

3、如果是創(chuàng)建vue2.0 + javascript的uniapp項目報錯，解決辦法費勁些：

直接在瀏覽器打開 https://github.com/dcloudio/uni-preset-vue，在master分支下載zip后綴的壓縮文件，解壓到本地。
通過命令行安裝, -p后面是解壓后的項目創(chuàng)建包的路徑，記得路徑中用/，而不是\。

vue create -p D:/uni-preset-vue-master my-vue2-project

不能上gitub的小伙伴，到我的國內gitee的網址下載一樣滴?。?！

https://gitee.com/chen-zhengsheng/uniapp-vscode-vue3-ts-template?_from=gitee_search

然后按照提示選擇選擇執(zhí)行即可

現在2023年了，建議都用vue3+ts+vite，那寫起來是真的爽?。?！

網頁運行

npm run dev:h5

微信小程序運行

npm run dev:mp-weixin

此時會生成一個dist文件

 選擇就可以

 名字換一個，然后appID用之前的就可以

 這個我的代碼就能在網頁和微信小程序同時運行啦，實時保存熱更新！

萬事開頭難，創(chuàng)建成項目就成功了一半

總結

到此這篇關于vscode中開發(fā)運行uniapp項目的文章就介紹到這了,更多相關vscode開發(fā)運行uniapp項目內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論