1. Webstorm uni-app語法插件 ：?Uniapp Support

Uniapp Support - IntelliJ IDEs Plugin | Marketplace

第一個是不收費，第二個收費

我選擇了第二個Uniapp Support ，有試用30天，安裝重啟webstorm之后，可以提高生產(chǎn)率。

補充

有小伙伴說搜索不到插件，目前webstorm 2022.3版本還能搜到2個：
# Uniapp Tool ? ?免費(A free Uniapp plugin )

官方網(wǎng)址：

Uniapp Tool - IntelliJ IDEs Plugin | Marketplace

# Uniapp Support ?收費paid

官方網(wǎng)址：

Uniapp Support - IntelliJ IDEs Plugin | Marketplace

2. 創(chuàng)建uni-app項目

?創(chuàng)建一個新項目，選擇uniapp,默認模版是演示用，有一些ui組件，常用功能封裝

3.? 運行項目

1.先配置微信開發(fā)者工具，HBuilder安裝目錄

2.添加運行項目配置，然后點擊運行

3. 首次啟動肯定是報錯了，需要配置自己的DClound?APPID， 微信小程序APPID

?這個appid號可以用微信者開發(fā)工具打開編譯出來微信項目，生成一個測試號，然后復制過來

項目打包發(fā)布開發(fā)的微信小程序項目源碼?

?配置完成之后重新，運行

?啟動完成?之后，在微信開發(fā)者工具模擬看效果

4. 創(chuàng)建新頁面

使用uniapp tool

5. uview-ui?開源ui框架

uView2.0重磅發(fā)布，利劍出鞘，一統(tǒng)江湖 - DCloud 插件市場

uview引入項目準備工作

在進行配置之前，請確保您已經(jīng)根據(jù)安裝中的步驟對uView進行了npm安裝，如果沒有，請先執(zhí)行安裝：

// 如果您的項目是HX創(chuàng)建的，根目錄又沒有package.json文件的話，請先執(zhí)行如下命令：
// npm init -y

// 安裝
npm install uview-ui@2.0.36

copy

#配置步驟

#1. 引入uView主JS庫

在項目src目錄中的main.js中，引入并使用uView的JS庫，注意這兩行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

copy

#2. 在引入uView的全局SCSS主題文件

在項目src目錄的uni.scss中引入此文件。

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

copy

#3. 引入uView基礎(chǔ)樣式

注意！

在App.vue中首行的位置引入，注意給style標簽加入lang="scss"屬性

<style lang="scss">
	/* 注意要寫在第一行，同時給style標簽加入lang="scss"屬性 */
	@import "uview-ui/index.scss";
</style>

copy

#4. 配置easycom組件模式

此配置需要在項目src目錄的pages.json中進行。

溫馨提示

1. uni-app為了調(diào)試性能的原因，修改easycom規(guī)則不會實時生效，配置完后，您需要重啟HX或者重新編譯項目才能正常使用uView的功能。
2. 請確保您的pages.json中只有一個easycom字段，否則請自行合并多個引入規(guī)則。

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此為本身已有的內(nèi)容
	"pages": [
		// ......
	]
}

copy

#5. Cli模式額外配置

如果您是vue-cli模式的項目，還需要在項目根目錄的vue.config.js文件中進行如下配置：

// vue.config.js，如沒有此文件則手動創(chuàng)建
module.exports = {
    transpileDependencies: ['uview-ui']
}

6. $u?變量： uni.$u，?this.$u

從1.7.9開始，uView將$u對象同時掛載到了uni對象上，這意味著您可以在外部的js文件中，通過uni.$u.xxx的形式去調(diào)用uView提供的一些工具方法，而不再像從前一樣必須在*.vue中通過uni.$u.xxx的形式調(diào)用。

在vue頁面, uni.$u == this.$u

console.log(">>>this.$u",this.$u)
      console.log(">>>uni.$u",uni.$u)
      console.log(">>>this.$u==uni.$u",this.$u==uni.$u)

?

#如何不使用easycom而單獨引用某一個組件

存在弊端

不管是webstorm,還是HBuiler,效果生效到微信開發(fā)者工具，走了熱編譯掃啟動，也還是有幾秒的延遲。

擴展

https://blog.csdn.net/LlanyW/article/details/132450872?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132450872%22%2C%22source%22%3A%22LlanyW%22%7Dhttps://blog.csdn.net/LlanyW/article/details/132450872?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22132450872%22%2C%22source%22%3A%22LlanyW%22%7D文章來源地址http://www.zghlxwxcb.cn/news/detail-677879.html

到了這里，關(guān)于Webstorm 入門級玩轉(zhuǎn)uni-app 項目-微信小程序+移動端項目方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！