プロジェクト概要
プロジェクト構成概要
プロジェクト全体構成図
プロジェクトのセットアップ
Vite公式サイト
https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
Vue3 + Viteプロジェクトの作成
要件：
Viteを使用するには、Node.jsバージョン18+が必要です
作成コマンド：
# npm 7以上の場合、--を追加する必要があります:
npm create vite@latest my-admin-app -- --template vue
# yarn
yarn create vite my-admin-app --template vue
# pnpm
pnpm create vite my-admin-app --template vue
依存関係のインストール
# npm:
npm install
# yarn
yarn install
プロジェクトの起動
yarn dev
不要なファイルの削除
main.jsでデフォルトでインポートされているスタイルを削除
import './style.css'
componentsフォルダ内のHelloWorld.vueを削除
app.vueのコードを以下のように変更
<script setup>
</script>
<template>
</template>
<style scoped>
</style>
必須ライブラリのインストール
yarn add less
yarn add vue-router
yarn add element-plus
yarn add @element-plus/icons-vue
エイリアスの設定
vite.config.js内に以下を追加
export default defineConfig({
plugins: [vue()],
// 以下のresolveは追加したエイリアス設定です
resolve:{
alias:[
{
find: "@", replacement: "/src"
}
]
}
})
リセットスタイルファイルと画像リソースの導入
教材のlessフォルダとimagesフォルダをsrc/assetsに配置
main.jsで以下をインポート
import '@/assets/less/index.less'
#ルーティングの設定
- srcフォルダにrouterフォルダを作成し、その中にindex.jsファイルを作成
// 2つのメソッドをインポート：1つはルーターオブジェクトの作成、2つ目はハッシュモードの有効化
import { createRouter, createWebHashHistory } from 'vue-router'
// ルート定義
const routes = [
{
path: '/',
name: 'main-layout',
component: () => import('@/views/MainLayout.vue')
}
]
const router = createRouter({
// ルートモードの設定
history: createWebHashHistory(),
routes
})
// ルーターを外部に公開
export default router
- srcフォルダにviewsフォルダを作成し、その中にMainLayout.vueを作成（コンポーネントはデフォルトのコードが必要です）
<template>
<div>
メインレイアウトコンポーネントです
</div>
</template>
<script setup>
</script>
<style lang="less" scoped >
</style>
- main.jsでルーターを使用するために、createApp(App)を変数で受け取る
import router from './router'
const app = createApp(App)
app.use(router).mount('#app')
- app.vueコンポーネントにルートビューを配置
<template>
<router-view />
</template>
// アプリケーションのスタイル：全画面表示、スクロールバーの防止
// 注意: スタイルにscopedを使用しないでください
<style>
#app{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
#全体的なレイアウトの実装
Element Plusと@element-plus/icons-vueの導入
ドキュメント:
Element Plus: https://element-plus.org/zh-CN/guide/quickstart.html#%E5%AE%8C%E6%95%B4%E5%BC%95%E5%85%A5
@element-plus/icons-vue: https://element-plus.org/zh-CN/component/icon.html#%E6%B3%A8%E5%86%8C%E6%89%80%E6%9C%89%E5%9B%BE%E6%A0%87
// ElementPlusは完全インポートを使用します
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
// @element-plus/icons-vueアイコンの登録
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
- メインコンポーネントの実装
<template>
<div class="common-layout">
<el-container class="layout-container">
// カスタムメニューコンポーネント
<side-menu />
<el-container>
<el-header>
// カスタムヘッダーコンポーネント、el-headerでラップする必要があります
<app-header />
</el-header>
<el-main class="main-content">
メインコンテンツエリア
</el-main>
</el-container>
</el-container>
</div>
</template>
<script setup>
// これらのコンポーネントは後で定義し、ここで公開します
import { SideMenu, AppHeader } from "@/components"
</script>
<style lang="less" scoped>
.common-layout,.layout-container {
height: 100%;
}
.el-header{
background-color: #333;
}
</style>
- メニューとヘッダーコンポーネントの作成
componentsフォルダにSideMenu.vueとAppHeader.vueコンポーネントを作成。また、index.jsファイルも作成します。
index.jsで、これらのコンポーネントを一括公開
export {default as SideMenu} from "./SideMenu.vue"
export {default as AppHeader} from "./AppHeader.vue"
以降の実装詳細と具体的な内容は以下で説明
上記のコードをそのまま利用できます