uniapp
是一個使用Vue.js開發所有前端應用的框架,開發者編寫一套代碼,可發布到iOS、Android、以及各種小程序。深受廣大前端開發者的喜愛。uniapp
官方也提供了自己的IDE工具HBuilderX
,可以快速開發uniapp
項目。但是很多前端的同學已經比較習慣使用VSCode
去開發項目,為了開發uniapp
項目再去切換開發工具,而且對新的開發工具也要有一定的適應過程,大多數前端的同學肯定是不愿意的。下面我們就看看用VSCode
如何搭建uniapp
項目。
安裝node和pnpm
node
的安裝我就不多說了,去官網下載,直接安裝就可以了。node安裝好以后,我們再來安裝pnpm
。咦?node
安裝完不是自帶npm
嗎?這個pnpm
又是啥?這里簡單介紹一下npm
和pnpm
的區別,不做重點。使用 npm
時,依賴每次被不同的項目使用,都會重復安裝一次。 而在使用pnpm
時,依賴會被存儲在一個公共的區域,不同的項目在引入相同的依賴時,會從公共區域去引入,節省了空間。
pnpm
我們直接全局安裝就可以了,執行以下的命令:
npm install -g pnpm
安裝好以后,我們在命令行執行pnpm -v
,能夠看到版本號就說明安裝成功了。
創建uniapp項目
由于我們要使用VSCode
去開發項目,而且項目要使用Vue3
和TypeScript
,所以我們要使用命令行去創建uniapp
項目。先進入我們存放VSCode
的項目目錄,我的項目目錄是D:\VSProjects
,進入后,執行命令如下:
npx degit dcloudio/uni-preset-vue#vite-ts 項目名稱
項目名稱
寫你自己真實的項目名稱就可以了,我的項目叫做my-vue3-uniapp
。這個命令會把官方提供的使用了TypeScript
和Vite
的uniapp
項目模板下載下來,然后我們就可以去開發uniapp
項目了。
我們使用VSCode
打開項目,項目的目錄如下:
我們可以看到src
目錄里的文件都是uniapp
項目的文件,包括頁面、樣式、靜態文件等,src
目錄外是整個項目的文件,如:vite.config.ts
和tsconfig.json
等。然后我們打開終端,使用pnpm
命令安裝一下依賴,執行命令如下:
pnpm i
執行完成后,我們熟悉的node_modules
目錄出現在了項目中,如圖:
然后我們運行項目,執行命令如下:
pnpm run dev:mp-weixin
上面的命令會把我們的代碼編譯成微信小程序代碼,如圖:
編譯完成后,我們的項目中出現了dist
目錄,這個目錄就是編譯后的輸出目錄。然后我們打開微信小程序開發工具,目錄選擇/dist/dev/mp-weixin
,如圖:
AppID寫我們自己的小程序的AppID,點擊確定,
看到這個畫面,說明我們的uniapp
項目搭建成功了,而且可以通過微信小程序開發工具去預覽。我們可以通過VSCode
在頁面上添加些文字,看看微信小程序開發工具的畫面是否有改變。這里就不給大家演示了。
添加uni-ui擴展組件
在我們開發項目時,會用到各種組件,僅僅使用uniapp的內置組件是遠遠不夠的,我們還需安裝官方提供的擴展組件uni-ui,怎么安裝呢?我們同樣使用pnpm
命令去安裝,在具體安裝uni-ui擴展組件之前,我們先需要安裝sass
和sass-loader
,
安裝sass
pnpm i sass -D
安裝sass-loader
pnpm i sass-loader@v8.x
由于現在的node版本都是大于16的,所以,我們根據uniapp官方的建議,安裝v8.x
的版本。
最后我們安裝uni-ui,如下:
pnpm i @dcloudio/uni-ui
uni-ui安裝完成后,我們再配置easycom
,easycom
的好處是,可以自動引入uni-ui組件,無需我們手動import
,這對于我們開發項目來說非常的方便,我們打開src
目錄下的 pages.json
并添加 easycom
節點:
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 規則如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
// 其他內容
pages:[
// ...
]
}
這樣uni-ui擴展組件就添加到我們的項目中了。
Json文件的注釋
我們在添加easycom
的時候,發現pages.json
文件中的注釋是有錯誤提示的,我們想讓Json文件中可以有注釋,至少pages.json
和manifest.json
兩個文件這種可以有注釋,這個我們需要在VSCode
中配置一下,打開文件->首選項->設置
,如圖:
然后我們在文本編輯器
中找到文件
,再在Associations
中添加項,如下:
然后我們回到pages.json
和manifest.json
這兩個文件看一下,注釋就不報錯了。
VSCode插件安裝
到現在為止,我們的uniapp項目已經搭建起來了,而且已經可以正常運行了,兩個比較重要的json文件中,注釋文字也不報錯了。但這離我們正常開發還差很多,我們在使用uniapp組件的時候,沒有提示,這使得我們編寫程序很不方便,我們可以安裝幾個uniapp插件解決這些問題。我們在VSCode
的擴展商店中搜索一下uniapp,這里需要安裝3個插件:
- uniapp小程序擴展
- uni-create-view
- uni-helper
安裝完之后,我們在編寫頁面時,會有提示:
在新建頁面時,會有uniapp相關的選項:
這些對于我們實際開發是非常由幫助的。
安裝uniapp的types
我們可以看到vue文件中,uniapp的組件并沒有變綠,說明ts是沒有生效的,我們先把uniapp的類型文件安裝一下,如下:
pnpm i -D @uni-helper/uni-app-types @uni-helper/uni-ui-types
我們在使用pnpm安裝時,會報錯,我們根據uni-helper的官方文檔中的提示,將 shamefully-hoist
為 true
。這個需要我們找到家目錄下的.npmrc
文件,如圖:
然后在文件中增加:
registry=http://registry.npm.taobao.org
shamefully-hoist=true
然后,我們再執行pnpm命令安裝類型文件。安裝完成后,在項目根目錄下,打開tsconfig.json
文件,在types
中增加我們安裝的類型:
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
……
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"
]
}
……
}
添加完成后,我們發現compilerOptions
是有報錯的,鼠標懸停上去發現:
報錯提示兩個選項將要廢棄,我們要把這個錯誤提示去掉,可以在文件中增加"ignoreDeprecations": "5.0",
:
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "5.0",
……
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
這樣compilerOptions
就不報錯了。然后我們打開vue文件,發現uniapp的標簽都變綠了,但是會有報錯,這個VSCode
的插件之間有沖突造成的,我們可以配置如下解決,參考官方文檔:
{
……
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-app-types/volar-plugin"]
},
……
}
然后重啟VSCode
。最后我們發現vue文件的uniapp標簽變綠了,而且沒有報錯:
最后tsconfig.json
的整體內容如下:
{
"extends": "@vue/tsconfig/tsconfig.json",
"compilerOptions": {
"ignoreDeprecations": "5.0",
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
"lib": ["esnext", "dom"],
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types",
"@uni-helper/uni-ui-types"
]
},
"vueCompilerOptions": {
"plugins": ["@uni-helper/uni-app-types/volar-plugin"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
最后
到這里,我們的uniapp項目就搭建完成了,而且是使用我們非常熟悉的VSCode
,項目中還是用了Vue3
,Typescript
,Vite
,該裝的插件也已經裝上了,鼠標懸停會給我們組件的提示,大大提高了我們的開發效率。OK了,去開發我們的項目應用吧~~~