寫在前面

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

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

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

注意事項(xiàng)

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

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

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

npm install -g @vue/cli

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

cnpm install -g @vue/cli

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

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

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

4. 安裝Vue 語法提示插件

在Vscode 插件市場安裝語法提示插件，這里推薦幾個實(shí)用插件

• Vetur Vue語法提示插件
• vue-helper 又一款Vue語法插件，和Vetur 結(jié)合使用
• Auto Close Tag 標(biāo)簽自閉合插件，在使用外部組件的時候非常有用
• Auto Rename Tag 標(biāo)簽重命名插件，當(dāng)需要更改標(biāo)簽名稱的時候非常有用
• 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語法提示

npm i @dcloudio/uni-helper-json

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

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

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

同時可以自定義自己常用的代碼塊

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

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

npm run dev:%PLATFORM%

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

npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

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

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

1.通常在HX中新建頁面，會自動在pages.json中自動注冊同明，同路由頁面。在VsCode中頁面路由需要自行注冊

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

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

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


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

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

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

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

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

配置 easycom 規(guī)則

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

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

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

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

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

最新評論