vue3.0+TS+AntDesignVue プロジェクト

速い

Vite は今年 Youda によって開発された新しいツールです
。なぜ Youda は vite を起動しようとしたのですか? Webpack を使用すると、プロジェクトを開発して開始するたびに、比較的遅くなり、ホットアップデートも比較的遅いです。vite の主な特徴は、速いことです。公式 Web サイトでは、vite の特徴がこのように説明されています

1、快速的冷启动
2、即时的模块热更新
3、真正的按需编译

vite プロジェクトを初期化する

1. プロジェクトを初期化するには、git bash を開きます。Win コンピューターでは、cmd を使用してウィンドウを直接開き
、次のコマンドを実行することもできます。

yarn create vite-app <project name>
//我用的yarn，如没安装需要安装yarn

下図 15.39秒で完了実行も速い; ここに画像の説明を挿入
2. cdでディレクトリに入るだけ;
3. 実行インストールはyarn installに依存; プロジェクトはyarn devで開始; 次の図はvscodeで開始上図では、新しく作成したプロジェクト構造はvue-cli4で作成したプロジェクト構造と基本的に同じであることがわかります。main.jsファイルの内容を表示するためのApp.vueとmain.jsの両方
ここに画像の説明を挿入
です
。

import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

Vueの作成方法が変わっていることが分かりました以前は新しいVueで初期化していましたが、Vue3.0ではcreateAppのメソッドを使うように変更されました; Vue3の中国語
ドキュメント

設定項目

タイプスクリプトを設定する

1.タイプスクリプトをインストールする

yarn add typescript -D

2. tsconfig.jsonを初期化する

//执行命令 初始化 tsconfig.json 
npx tsc --init

3. main.js を main.ts に変更し
、他の参照を main.ts に変更し、他のページも変更する必要があります<script> 修改为 <script lang="ts">

4. vue ファイルを認識するように ts を構成し、プロジェクトのルートディレクトリに shim.d.ts ファイルを追加し
、次のコンテンツを追加します。

declare module "*.vue" {
    
    
  import {
    
     Component } from "vue";
  const component: Component;
  export default component;
}

Vueルーターの構成

Vue Router 4.0、変更についてはGithubで完全な詳細を確認してください。
現在のバージョンベータ版: v4.0.0-beta.13、yarn のインストールにはバージョン番号
1 が必要です、vuex をインストールしてください

yarn add [email protected]
// or
yarn add vue-router@next

2. インストール後、プロジェクトの src ディレクトリの下に新しいルーターディレクトリを作成するようにvue-router を設定し、index.ts ファイルを追加して、次の内容を追加します。

// import VueRouter from 'vue-router'
import {
    
    createRouter, createWebHashHistory} from 'vue-router'
const routes:any = []
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
    
    
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

// const routes :any = []
// // 3. Create the router instance and pass the `routes` option
// // You can pass in additional options here, but let's
// // keep it simple for now.
// const router = VueRouter.createRouter({
    
    
//   // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
//   history: VueRouter.createWebHashHistory(),
//   routes, // short for `routes: routes`
// })

3. ルーターを main.ts に導入し、main.ts ファイルを変更します。

import {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router/index'

// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中
app.use(router)
app.mount('#app')
// createApp(App).mount('#app')

Vuex を構成する

Vuex 4.0、変更についてはGithub の
現在のバージョンベータ版を確認してください: v4.0.0-beta.4
1. vuex をインストールします

       yarn add [email protected]
       //或者
       yarn add vuex@next

2. インストール後、プロジェクトの src ディレクトリの下に新しいストアディレクトリを作成し、index.ts ファイルを追加して、次のコンテンツを追加するようにvuex を構成します。

import {
    
     createStore } from 'vuex'

interface State {
    
    
  userName: string
}
export default createStore({
    
    
  state(): State {
    
    
    return {
    
    
      userName: "vuex",
    };
  },
});

Ant Design Vue の構成

具体的な使い方は公式ドキュメント
1. ant-design-vueの導入を参照してください。

yarn  add ant-design-vue@next

2. main.tsに導入

iimport {
    
     createApp } from 'vue'
import App from './App.vue'
import './index.css'
import AntDesignVue from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from './router/index'
import store from './store/index'

// import router 后创建并挂载根实例。
const app = createApp(App)
// 确保 t_use_  实例来创建router
// 整个应用程序路由器感知。
app.use(router)
app.use(store)
app.use(AntDesignVue)
app.mount('#app')
// createApp(App).mount('#app')

vite ビルド Vue3.0 プロジェクト