寫在前面

uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、H5、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。 開(kāi)發(fā)UNI-APP最好的工具是HbuilderX,但這并不打臉為什么要在VsCode中開(kāi)發(fā)UNI-APP，用官方的話來(lái)說(shuō)HBuilderX是專為Vue打造的編輯器，那么非Vue又該怎么辦呢？這時(shí)就不得不對(duì)選擇其它產(chǎn)品，那么為什么不將UNI-APP也轉(zhuǎn)移到其它產(chǎn)品上開(kāi)發(fā)呢？因此從統(tǒng)一編輯器的角度出發(fā)，最近選擇了VsCode。

HBuildex 或許是開(kāi)發(fā)UNI-APP最好的工具，但卻不是最全面的工具。

• 在使用VS Code開(kāi)發(fā)UNI-APP之前，墻裂建議先閱讀官方的指南當(dāng) uni-app 遇見(jiàn) vscode 當(dāng)然后文我會(huì)對(duì)一些重要的步驟再次強(qiáng)調(diào)。以及官方教程vue-cli 開(kāi)發(fā)uni-app教程

注意事項(xiàng)

• VsCode 開(kāi)發(fā)UNI-APP 只能充當(dāng)編輯器作用，程序調(diào)試必須在對(duì)應(yīng)的環(huán)境中調(diào)試，比如微信小程序則只能在微信開(kāi)發(fā)者工具中調(diào)試（這點(diǎn)和HX相同）
• VsCode 中可以使用npm命令運(yùn)行和打包，但是無(wú)法直接調(diào)用真機(jī)模擬器，也無(wú)法使用APP打包等功能，若有這方面的需求只能在VSCode 環(huán)境下編輯代碼，然后通過(guò)HX打包。

開(kāi)發(fā)環(huán)境搭建

1. 全局安裝Vue-cli 3.x (如已安裝請(qǐng)?zhí)^(guò))

npm install -g @vue/cli

安裝了淘寶鏡像的推薦使用cnpm安裝

cnpm install -g @vue/cli

2. 通過(guò) CLI 創(chuàng)建 uni-app 項(xiàng)目

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

3. 使用VsCode 打開(kāi)項(xiàng)目

4. 安裝Vue 語(yǔ)法提示插件

在Vscode 插件市場(chǎng)安裝語(yǔ)法提示插件，這里推薦幾個(gè)實(shí)用插件

• Vetur Vue語(yǔ)法提示插件
• vue-helper 又一款Vue語(yǔ)法插件，和Vetur 結(jié)合使用
• Auto Close Tag 標(biāo)簽自閉合插件，在使用外部組件的時(shí)候非常有用
• Auto Rename Tag 標(biāo)簽重命名插件，當(dāng)需要更改標(biāo)簽名稱的時(shí)候非常有用
• Highlight Matching Tag 高亮選中的標(biāo)簽，快速定位標(biāo)簽的首尾位置
• TODO Highlight 高亮代碼中的待辦
• Todo Tree 和 TODO Highlight 結(jié)合，構(gòu)建體驗(yàn)更完美todo管理系統(tǒng)
• koroFileHeader 快速生成頭部注釋和代碼注釋

5. 安裝UNI-APP語(yǔ)法提示

npm i @dcloudio/uni-helper-json

6. 導(dǎo)入HX自定義代碼塊

從github 下載 uni-app 代碼塊，放到項(xiàng)目目錄下的 .vscode 目錄即可擁有和 HBuilderX 一樣的代碼塊。

若沒(méi)有.vscode 則自行在項(xiàng)目根目錄下新建

同時(shí)可以自定義自己常用的代碼塊

7. 運(yùn)行&發(fā)布項(xiàng)目
運(yùn)行與發(fā)布項(xiàng)目可通過(guò)VSCode 左側(cè)資源管理器/ NPM腳本快速啟動(dòng)命令

運(yùn)行項(xiàng)目

npm run dev:%PLATFORM%

發(fā)布項(xiàng)目

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

若要發(fā)布APP則只能通過(guò)HX操作

開(kāi)發(fā)配置注意事項(xiàng)

1.通常在HX中新建頁(yè)面，會(huì)自動(dòng)在pages.json中自動(dòng)注冊(cè)同明，同路由頁(yè)面。在VsCode中頁(yè)面路由需要自行注冊(cè)

"pages": [ 
		{
			"path": "pages/home/home"
		}
	]

發(fā)行配置說(shuō)明：在HX中發(fā)行時(shí)提供了可視化的配置界面，在VSCode中發(fā)行配置需自行在manifest.json中配置。下面以配置微信小程序appid 和配置H5打包路徑為例說(shuō)明

// manifest.json  需通過(guò)JSONC 格式打開(kāi)
	"mp-weixin": { /* 微信小程序特有相關(guān) */
		"appid": " your_wx_apid ",   /* 微信appid */
		"setting": {
			"urlCheck": false   /* 是否檢查安全域名和 TLS 版本 */
		},
		"usingComponents": true  /* 是否啟動(dòng)自定義組件模式 */
	},


 	"h5" : {   /* H5相關(guān) */
			"router" : {
					"base" : "/basePath/"  /* 項(xiàng)目basePath */
			},
			"domain" : " your_domin ",  /* 域名 */
			"optimization" : {
					"treeShaking" : {
							"enable" : true  /* 是否啟動(dòng)搖樹優(yōu)化 */
					}
			}
		}

其它更多配置請(qǐng)參見(jiàn)uni-app配置項(xiàng)列表

3.全局CSS文件可在APP.vue style標(biāo)簽 中引入。 SCSS 文件只能在uni.scss 文件中引入然后才能在其它頁(yè)面中使用

// APP.vue 
<style lang="scss">
	/*每個(gè)頁(yè)面公共css */
	@import url("./common/iconfont.css");
</style>

// uni.scss 
@import 'uview-ui/theme.scss';

配置 easycom 規(guī)則

easycom 規(guī)則掃盲文章參見(jiàn)easycom模式，UNI-APP組件開(kāi)發(fā)調(diào)用必須掌握的實(shí)用技巧！

easycom規(guī)則 在pages.json文件中配置，自定義配置實(shí)例如下

// pages.json
	"easycom": {
		"my-(.*)":"@/my-ui-components/my-$1.vue"
	},
	"pages":[...] 

配置說(shuō)明： 對(duì)目錄my-ui-components下的所有前綴my-的.vue 文件應(yīng)用easycom 規(guī)則。（因此為方便理解你可以將$1看作占位符或者通配符）

到此這篇關(guān)于VSCode開(kāi)發(fā)UNI-APP 配置教程及插件的文章就介紹到這了,更多相關(guān)VSCode開(kāi)發(fā)UNI-APP 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論