我們使用 vue2 創(chuàng)建工程作為示例，uni-app中Vue2版的組件庫和插件也比較多，穩(wěn)定、問題少，可以先參考下官方文檔:uni-app官網(wǎng)
?既然是使用vue腳手架，那肯定要全局安裝@vue/cli，已安裝的可以跳過。
注意：Vue2創(chuàng)建的項(xiàng)目，腳手架版本要用@4的版本，用@5的版本運(yùn)行項(xiàng)目會(huì)報(bào)錯(cuò)，這里推薦?@4.5.15
npm install -g @vue/cli@4.5.15
創(chuàng)建項(xiàng)目，后面是你的項(xiàng)目名字。
vue create -p dcloudio/uni-preset-vue 項(xiàng)目名稱這里我們選擇默認(rèn)模板。
在VSCode打開這個(gè)項(xiàng)目，可以看看整個(gè)項(xiàng)目項(xiàng)目結(jié)構(gòu)，src下項(xiàng)目結(jié)構(gòu)跟HbuilderX創(chuàng)建的根目錄基本一樣，說明兩種項(xiàng)目轉(zhuǎn)換還是比較方便的。
tsconfig.json報(bào)錯(cuò)問題
目前通過vue-cli命令行創(chuàng)建的項(xiàng)目已經(jīng)不再只是tsconfig.json，只有是使用ts的項(xiàng)目才會(huì)是tsconfig.json，否則會(huì)是jsconfig.json。所以這個(gè)問題已經(jīng)不存在了。
增強(qiáng)pages.json和manifest.json開發(fā)體驗(yàn)
json文件寫注釋
我們打開pages.json和manifest.json，發(fā)現(xiàn)會(huì)報(bào)紅，這是因?yàn)樵?code>json中是不能寫注釋的，而在jsonc是可以寫注釋的。
解決方案：我們把pages.json和manifest.json這兩個(gè)文件關(guān)聯(lián)到jsonc中，然后就以寫注釋了。在設(shè)置中打開settings.json，添加：
安裝以下插件輔助開發(fā)
組件提示
接下來就是組件語法提示，如<view>、<button>等uni-app原生組件，這個(gè)需要我們手動(dòng)安裝對(duì)應(yīng)的依賴包。
npm i @dcloudio/uni-helper-json
如果是vue3,就不使用上面這個(gè)命令,而是下面這個(gè)
npm i -D uni-app-types
?然后在tsconfig.jsonorjsconfig.json配置compilerOptions.types和vueCompilerOptions，確保include?包含了對(duì)應(yīng)的?vue?文件。
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
"types": ["@dcloudio/types", "uni-app-types"]
},
"vueCompilerOptions": {
"experimentalRuntimeMode": "runtime-uni-app"
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
如果你要使用uniCloud、uni-ui等，可以安裝uni-cloud-types、uni-ui-types等。
還有其他的可以去https://github.com/ModyQyW/uni-helper/tree/main/packages/uni-ui-types
?注意：cli創(chuàng)建的uni-app項(xiàng)目，跟web項(xiàng)目一樣，需要安裝對(duì)應(yīng)的sass模塊，才能寫scss。安裝sass-loader，建議版本@10，否則可能會(huì)導(dǎo)致vue與sass的兼容問題而報(bào)錯(cuò)。
npm i sass sass-loader@10 -D
運(yùn)行、發(fā)布項(xiàng)目
npm run dev:mp-weixin將打包后的dist文件夾中的mp-weixin文章來源：http://www.zghlxwxcb.cn/news/detail-774363.html
用微信小程序開發(fā)者工具打開文章來源地址http://www.zghlxwxcb.cn/news/detail-774363.html
到了這里，關(guān)于搭建一個(gè)vscode+uni+vue的小程序項(xiàng)目的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
