Vue3.0プロジェクト構築の詳細なプロセスとルーティング構成

Vue3.0プロジェクト構築の詳細なプロセスとルーティング構成

1つ、vue3.0のインストール

1つ目は、次のようにVue3をインストールすることです。

• vue-cliyarn add @vue/cli -gをインストールします。//もちろん、npmまたはcnpmを選択してインストールすることもできます。
• インストールが成功したかどうかを確認します。

  E: \minepro\ myweek > vue - V
  @vue / cli 4.5 .6

1.プロジェクトを作成します

• プロジェクトの作成： vue create vue5(项目名称)

• 赤い領域を選択し、Enterキーを押します。

• 次に、インストールを辛抱強く待ちます。

2.プロジェクトを開始します

• インストールが完了したら、次の手順に従ってプロジェクトを開始します。

• ここで、おめでとうございます。Vue3プロジェクトは正常に実行されました。

2.ルーティング（特別な注意を払ってください、多くの友人はここで間違いを犯します）

Vue3のルーティングは、Vueの以前のインストールと同じではありません、私は最初に始めたときに多くの落とし穴に遭遇しました、そしてそれから私はたくさんの記事を読み、本質を別々に抽出し、そして探求し続けました。経路を個別に抽出する理由は、個人的には曲がりくねった道路が多いと感じているためです。書き留めて、みんなで学び、一緒に進んでください。

1.ルーティングバージョン

最初にルーティングバージョンをインストールします。ここでは必ずしも修正されているわけではなく、最近使用できます。問題はありません。
yarn add [email protected] -S

2.ルーティング手順

ここでのパラメータは非常に重要です。注意深く読んだ後、それらを使用するときに非常に意味があります。

名前	説明	補足
createWebHashHistory（process.env。BASE_URL）	ハッシュルーティング	「＃」記号があります
createWebHistory	履歴ルーティング	「＃」記号なし
createMemoryHistory	キャッシュされた履歴を使用してルーティング
parseQuery	クエリパラメータの逆シリアル化
stringifyQuery	クエリパラメータのシリアル化
onBeforeRouteLeave	ルートリーブフック

3.ルーティング構成

インストール後、メインファイルで使用します。

• ルーティングシリーズのインポート：
  import { createWebHistory, createRouter } from 'vue-router'
• ルートを作成する
  const history = createWebHistory()
• ページロジックの構成
  ファイルでのルーターの使用はVue2の本体に似ていますが、作成モードとルーティングモードは同じではありません。詳しく調べてください。

const router = createRouter({
    
    
  history, // 路由模式
  routes: [
    {
    
    
      // 页面逻辑
      path: '/test',
      name: 'test',
      component: () => import('@/page/Test')
    }
  ]
})

4.ルートコール

次のアプリはここから取得されます。

import {
    
     createApp } from 'vue'
// 引入组件
import App from './App'
// 引入资源
import router from './route'
// 创建app
const app = createApp(App)

// 注入路由
app.use(router)

// 挂载实例
app.mount('#app')

• 紹介：import router from './route'

• 注入：app.use(router)

5.ルーティングの使用法

• スイッチトリガー：<router-link to="/mine">mine</router-link>
• ディスプレイ：<router-view></router-view>

6.エフェクト画像

3つのコンポーネント：作成して呼び出す

1.コンポーネントを作成します

• コンポーネントを作成する:(新しいページを作成するだけです）
• コンポーネントの紹介：import ExportExcel from './components/ExportExcel'

2.コンポーネントを登録します

import {
    
     createApp } from 'vue'
import App from './App'
const app = createApp(App)
// 注册组件
app.component('ExportExcel', ExportExcel)

3.コンポーネントを使用する

• コンポーネントを使用する：<ExportExcel/>

4.添付ファイル-Vue3ディレクトリファイルツリー

V.Vue3.0の新しいプロジェクトのソースコード取得方法

1.gitでソースコードを取得します

ここをクリックしてください：Vue3.0プロジェクトのgitアドレス

2 npm安装：npm i ng_vue || 糸追加ng_vue--save

詳細な手順：

1. インストールが完了したら、node_modules-> ng_vue-> 单独提取文件夹->と入力します。然后安装依赖，运行项目
2. 現れるnode_modules
   
3. 現れる ng_vue
   
4. 現在のフォルダを抽出し、保存する新しいフォルダを作成します
   
5. 依存関係をインストールし、プロジェクトを実行します