Bolehkah vscode menggunakan uni-app?

vscode boleh menggunakan uni-app Kaedah khusus: 1. Pasang vue syntax prompt plug-in vetur 2. Jalankan arahan "npm i @dcloudio/uni-helper-json" untuk memasang komponen. syntax prompt; 3. Muat turun dan Import sahaja kod uni-app yang disertakan dengan HBuilderX.

Persekitaran pengendalian tutorial ini: sistem Windows 7, Kod Visual Studio versi 1.45.1.0, komputer DELL G3.

uni-app ialah rangka kerja yang menggunakan sintaks vue untuk membangunkan program kecil, apl dan H5 Alat pembangunan yang disyorkan secara rasmi ialah HBuilderX, yang menyediakan pengalaman pembangunan yang baik.

Namun, memandangkan HBuilderX tidak mempunyai versi Linux dan banyak bahagian hadapan telah terbiasa dengan vscode sebelum ini, mereka tidak mahu menukar editor. Menggunakan vscode secara langsung untuk membangunkan apl uni, pengalamannya tidak begitu baik.

Malah, uni-app dan vscode juga boleh berjalan dengan baik. Seterusnya, saya akan menunjukkan kepada anda postur pembukaan uni-app yang betul dalam vscode.

Projek CLI

Pasang vue-cli 3.x secara global (langkau langkah ini jika sudah dipasang)

npm install -g @vue/cli

Cipta projek uni-app melalui CLI

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

Pada masa ini, anda akan digesa untuk memilih templat projek Untuk pengalaman kali pertama, disyorkan untuk memilih hello uni-app templat projek, seperti yang ditunjukkan di bawah:

Buka projek dalam vscode

Pasang gesaan sintaks vue vetur pemalam

Projek CLI disertakan dengan gesaan sintaks uni-apl dan 5 gesaan sintaks apl secara lalai

Gesaan sintaks komponen pemasangan

Petua sintaks komponen ialah sorotan uni-apl, yang boleh disediakan oleh beberapa rangka kerja lain.

npm i @dcloudio/uni-helper-json

Import blok kod yang disertakan dengan HBuilderX

Muat turun dari github blok kod uni-app, letakkannya dalam direktori .vscode di bawah direktori projek untuk mempunyai blok kod yang sama seperti HBuilderX.

Jalankan projek

npm run dev:%PLATFORM%

Terbitkan projek

npm run build:%PLATFORM%

%PLATFORM% Nilai yang mungkin adalah seperti berikut:

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	头条小程序
mp-qq	qq 小程序

CLI 方式参考文档

HBuilderX 工程

HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装

初始化npm（如已初始化跳过此步骤）

npm init -y

安装 uni-app 语法提示

npm i @types/uni-app @types/html5plus -D

另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。

关于uni-app插件市场的插件，vscode一样可以使用。

• 如果这些插件有npm使用方式（如uni-ui），可以用npm
• 如果作者没提供npm方式，那么下载zip包解压也是可以用的

【相关推荐：《uniapp教程》、《vscode教程》】

Atas ialah kandungan terperinci Bolehkah vscode menggunakan uni-app?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!