VSCode開發UNI-APP 配置教程及外掛
目錄
- 寫在前面
- 注意事項
- 開發環境搭建
- 開發配置注意事項
寫在前面
uni-app 是一個使用 . 開發所有前端應用的框架，開發者編寫一套程式碼，可釋出到iOS、、H5、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平臺。 開發UNI-APP最好的工具是HbuilderX,但這並不打臉為什麼要在VsCode中開發UNI-APP，用官方的話來說HBuilderX是專為Vue打造的編輯器，那麼非Vue又該怎麼辦呢？這時就不得不對選擇其它產品，那麼為什麼不將UNI-APP也轉移到其它產品上開發呢？因此從統一編輯器的角度出發，最近選擇了VsCode。
HBuildex 或許是開發UNI-APP最好的工具，但卻不是最全面的工具。
- 在使用VS Code開發UNI-APP之前，牆裂建議先閱讀官方的指南當 uni-app 遇見 vscode 當然後文我會對一些重要的步驟再次強調。以及官方教程vue-cli 開發uni-app教程
注意事項
- VsCode 開發UNI-APP 只能充當編輯器作用，程式除錯必須在對應的環境中除錯，比如微信小程式則只能在微信開發者工具中除錯（這點和HX相同）
- VsCode 中可以使用npm命令執行和打包，但是無法直接呼叫真機模擬器，也無法使用APP打包等功能，若有這方面的需求只能在VSCode 環境下編輯程式碼，然後通過HX打包。
開發環境搭建
1. 全域性安裝Vue-cli 3.x (如已安裝請跳過)
npm install -g @vue/cli
安裝了淘寶映象的推薦使用cnpm安裝
cnpm install -g @vue/cli
2. 通過 CLI 建立 uni-app 專案
vuKaTpye create -p dcloudio/uni-preset-vue my-project
3. 使用VsCode 開啟專案
4. 安裝Vue 語法提示外掛
在Vscode 外掛市場安裝語法提示外掛，這裡推薦幾個實用外掛
- Vetur VKaTpyue語法提示外掛
- vue-helper 又一款Vue語法外掛，和Vetur 結合使用
- Auto Close Tag 標籤自閉合外掛，在使用外部元件的時候非常有用
- Auto Rename Tag 標籤重新命名外掛，當需要更改標籤名稱的時候非常有用
- Highlight Matching Tag 高亮選中的標籤，快速定位標籤的首尾位置
- TODO HighliKaTpyght 高亮程式碼中的待辦
- Todo Tree 和 TODO Highlight 結合，構建體驗更完美todo管理系統
- koroFileHeader 快速生成頭部註釋和程式碼註釋
5. 安裝UNI-APP語法提示
npm i @dcloudio/uni-helper-json
6. 匯入HX自定義程式碼塊
從 下載 uni-app 程式碼塊，放到專案目錄下的 .vscode 目錄即可擁有和 HBuilderX 一樣的程式碼塊。
若沒有
.vscode則自行在專案根目錄下新建
同時可以自定義自己常用的程式碼塊
7. 執行&釋出專案
執行與釋出專案可通過VSCode 左側資源管理器/ NPM快速啟動命令
執行專案
npm run dev:%PLATFORM%
釋出專案
npm run build:%PLATFORM%
%PLATFORM% 可取值如下：
| 值 | 平臺 |
|---|---|
| h5 | H5 |
| mp-alipay | 支付寶小程式 |
| mp-baidu | 百度小程式 |
| mp-weixin | 微信小程式 |
| mp-toutiao | 頭條小程式 |
| mp-qq qq | 小程式 |
若要釋出APP則只能通過HX操作
開發配置注意事項
1.通常在HX中新建頁面，會自動在pages.json中自動註冊同明，同路由頁面。在VsCode中頁面路由需要自行註冊
"pages": [
{
"path": "pages/home/home"
}
]
發行配置說明：在HX中發行時提供了視覺化的配置介面，在VSCode中發行配置需自行在manifest.json中配置。下面以配置微信小程式appid 和配置H5打包路徑為例說明
// manifest.json 需通過JSONC 格式開啟
"mp-weixin": { /* 微信小程式特有相關 */
"appid": " your_wx_apid ",/* 微信appid */
"setting": {
"urlCheck": false /* 是否檢查安全域名和 TLS 版本 */
},"usingComponents": true /* 是否啟動自定義元件模式 */
},"h5" : { /* H5相關 */
"router" : {
"base" : "/basePath/" /* 專案basePath */
},"domain" : " your_domin ",/* 域名 */
"optimization" : {
"treeShaking" : {
"enable" : true /* 是否啟動搖樹優化 */
}
}
}
其它更多配置請參見uni-app配置項列表
3.全域性檔案可在APP.vue style標籤 中引入。 SCSS 檔案只能在uni.scss 檔案中引入然後才能在其它頁面中使用
// APP.vue
<style lang="scss">
/*每個頁面公共css */
@import url("./common/iconfont.css");
</style>
// uni.scss @import 'uview-ui/theme.scss';
配置 easycom 規則
easycom 規則掃盲文章參見easycom模式，UNI-APP元件開發呼叫必須掌握的實用技巧！
easycom規則 在pages.jsonKaTpy檔案中配置，自定義配置例項如下
// pages.jsowww.cppcns.comn
"easycom": {
"my-(.*)":"@/my-ui-components/my-$1.vue"
},"pages":[...]
配置說明： 對目錄my-ui-components下的所有字首my-的.vue 檔案應用easycom 規則。（因此為方便理解你可以將$1看作佔位符或者萬用字元）
到此這篇關於VSCode開發UNI-APP 配置教程及外掛的文章就介紹到這了,更多相關VSCode開發UNI-APP 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！