vite.js が開発者の間でますます人気になるにつれて、多くの大手メーカーはプロジェクトで vue3 開発を好むようになりました。何度か練習してみると、確かに良いことが分かりました。
バージョン情報
HBuilderX: 3.8.4
Vite: 4.2.1
uView-Plus: 3.1.31
uniapp+vue3 プロジェクトを初期化する
uniapp は、プロジェクトを迅速に構築するためのHBuilderX 可视化界面2 つのvue-cli命令行方法を公式に提供しています。
今日は、 hbuilderx ビジュアル エディターを使用してプロジェクトを作成することに焦点を当てます。
- エディターで「ファイル」>「新規」>「プロジェクト」をクリックします (ショートカットは Ctrl+N)
- ユニアプリ プロジェクトを選択し、プロジェクト名/パスを入力し、プロジェクト テンプレートを選択し、vue3 バージョンを確認して、[作成] をクリックすると、正常に作成されます。
- エディターで [実行] > [ブラウザーで実行] > [ブラウザーの選択] をクリックします。
もちろん、携帯電話やシミュレータ、あるいは小さなプログラム ツール上でも実行できます。
このような非常に単純な uniapp+vue3 プロジェクトが構築されました。次のステップは、簡単な構成とコンポーネント ライブラリの導入です。
App.vue セットアップ構文
作成したプロジェクトはapp.vueをvue2で記述していますが、構文シュガーコーディングに慣れている方はインポートによりライフサイクルを導入する以下の方法に変更してください。
<script setup>
import {
onLaunch, onShow, onHide } from '@dcloudio/uni-app'
onLaunch(() => {
console.log('App Launch!')
})
onShow(() => {
console.log('App Show!')
})
onHide(() => {
console.log('App Hide!')
})
</script>
uniapp+piniaステータス管理
uni-app には vuex と pinia の状態管理が組み込まれており、インストールせずに使用できます。今回はuniappにおけるpinia設定の使い方を中心に説明します。
main.jsにpiniaを導入する
import App from './App'
import uView from '@/uview-plus'
import {
createSSRApp } from 'vue'
import {
createPinia } from 'pinia'
export function createApp() {
const app = createSSRApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(uView)
return {
app,
pinia
}
}
新しいstore/counter.jsファイルを作成します
import {
defineStore } from 'pinia'
export const counterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
},
actions: {
increment() {
this.count++
}
}
})
このようにして、pinia 構成ファイルは基本的に導入および作成され、.vue ページで使用されます。
<view>计数：{
{
counter.count}}</view>
<button @click="handleAdd">增加</button>
<script setup>
import {
counterStore } from '@/store/counter'
const counter = counterStore()
const handleAdd = () => {
counter.increment()
}
</script>
uview-plus と uni-ui の導入
現在、uniapp vue3 をサポートするコンポーネント ライブラリには、uni-ui (公式)、uview-plus などがあります。
- hbuilderx を使用して uni-ui プラグインをインポートする
ダウンロードしてルート ディレクトリに直接配置することもできます。
導入や登録不要ですぐにご利用いただけます。コード領域に入力すると、u さまざまな組み込みコンポーネントまたは Uni-ui コンポーネントのリストが表示されます。
https://uniapp.dcloud.net.cn/component/uniui/quickstart.html
https://uiadmin.net/uview-plus/components/install.html
主にhbuilderxでプロジェクトを作成し、uview-plusコンポーネントライブラリをインポートする方法を説明します。
- hbuilderx ツールを使用してインポートする
uview-plus とスタイルの紹介
// main.js
import uviewPlus from '@/uni_modules/uview-plus'
import {
createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uviewPlus)
return {
app
}
}
/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';
需要在app.vue首行引入基础样式
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "@/uni_modules/uview-plus/index.scss";
</style>
uni_modules を介してインポートされず、ルート ディレクトリに直接ダウンロードされた場合は、easycom インポート ルールを追加で構成する必要があります。
import App from './App'
import uView from '@/uview-plus'
import {
createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.use(uView)
return {
app,
pinia
}
}
// 在根目录uni.scss中引入主题样式
@import '@/uview-plus/theme.scss';
// 在app.vue中引入基础样式
<style lang="scss">
@import "@/uview-plus/index.scss";
</style>
// pages.json
{
"custom": {
// 引入uview-plus组件库
"^u-(.*)": "@/uview-plus/components/u-$1/u-$1.vue"
}
// ...
}
ユニアプリ構成 vite.config.js
uniapp+vue3 プロジェクトに基づいて、vite.config.js ファイルをカスタマイズすることもできます。.env 環境変数をカスタマイズすることもできます。
import {
defineConfig, loadEnv } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import {
resolve } from 'path'
import {
parseEnv } from './utils/env'
export default defineConfig(({
command, mode }) => {
const viteEnv = loadEnv(mode, __dirname)
const env = parseEnv(viteEnv)
return {
plugins: [
uni()
],
define: {
// 自定义配置环境变量
'process.env.VITE_APPNAME': JSON.stringify('uniapp-vite4-vue3'),
'process.env.VITE_ENV': env
},
/*构建选项*/
build: {
// ...
},
esbuild: {
// 打包去除 console.log 和 debugger
// drop: env.VITE_DROP_CONSOLE && command === 'build' ? ["console", "debugger"] : []
},
/*开发服务器选项*/
server: {
// 端口
port: env.VITE_PORT,
// 运行时自动打开浏览器
open: env.VITE_OPEN,
// 代理配置
proxy: {
// ...
}
}
}
})
このようにして、process.env 環境変数を .vue ページで使用できます。
要約すると、これは uniapp vue3 を使用したマルチターミナル プロジェクトの構築についての簡単な紹介であり、将来的には uniapp+vue3 の実践的なプロジェクトもいくつか共有する予定です。