VEUE 3コンポーネントの構築

アルファ版Vue 3 今すぐ利用可能です!
私がこのポストを書いている間、アルファ8バージョンはちょうどリリースされました.
Vueの新しいバージョンは、それが強化と改良の雪崩をもたらすでしょうが、新しいバージョンで最も重要な変更は以下の通りです.

組成API:これは多くの議論された機能は、反応フックに触発されます.

ポータル:現在のコンポーネントの外にあるコンテンツをレンダリングします.

断片:複数のルートノードを許します.

V - MODEL - APIを更新しました:現在、複数のモデルを受け入れます.

サスペンス:条件が満たされるまで(ほとんどはUxのもの)、コンポーネントの代わりにフォールバックコンテンツをレンダリングする特殊コンポーネントです.

TypeScript:Vueは今完全なタイプスクリプトをサポートしています.

Vue 3はまだアクティブな開発中であるので、そのコンポーネントのいくつかはまだバグを持っているかもしれません、あるいは、若干のAPIは変わるかもしれません、しかし、新しい機能で遊んで始めるために単純なアプリケーションを書き始めることはすでに可能です.
私がこの記事のTypeScriptの大ファンであるので、私はあなたに私がTypeScriptを使用してVue 3で新しいアプリケーションを作成するために続いた手順を説明します.
しかし、トークは安いです、新しいアプリを設定を開始しましょう🙂

プロジェクトの設定

最初に行うことは、次の行のコマンドを使用して新しいアプリケーションを初期化することです.

yarn init

次に、プロジェクトに必要な依存関係を追加します.

yarn add [email protected]
yarn add --dev yarn [email protected] webpack-cli webpack webpack-dev-server typescript ts-loader @vue/[email protected]

これで、ファイルを作成する簡単なWebpackの設定を定義する必要がありますwebpack.config.js 次のコードを追加します.

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = (env = {}) => ({
  mode: env.prod ? 'production' : 'development',
  devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
  entry: path.resolve(__dirname, './src/main.ts'),
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue': '@vue/runtime-dom'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true
  }
})

これまでのところ、我々のセットアップは一緒に来ていますが、それはまだスクリプトをコンパイルしませんtsconfig.json 以下の規則を持つファイル

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noLib": false,
    "sourceMap": true,
    "strict": true,
    "strictPropertyInitialization": false,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015",
    "baseUrl": ".",
  },
  "exclude": [
    "./node_modules"
  ],
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue",
  ],
}

TypesScriptとWebPackを設定した後、ショートカットを追加して、新しいスクリプトをpackage.json ファイル

{

  //...
  // Dependencies
  //...

  "scripts": {
    "dev": "webpack-dev-server"
  }
}

注意:インポート時にエラーを避けるには*.vue ファイルを追加する必要があります次のshims-vue.d.ts ファイル./src フォルダ

declare module "*.vue" {
    import { defineComponent } from "vue";
    const Component: ReturnType<typeof defineComponent>;
    export default Component;
}

これまで構築されたインフラストラクチャが正しく動作していることをテストするには、いくつかのことが必要です.

簡素であるindex.html プロジェクトの根源に

<!-- index.html -->
<h1>Hello Vue 3!</h1>
<script src="/dist/main.js"></script>

を持っている/src フォルダ

有main.ts 次のようにしてプロジェクトにファイルします

// src/main.ts

console.log('Hello world from Typescript!');

Webサーバを実行するyarn dev

すべてが働いているならばhttp://localhost:8080 あなたは、我々がちょうど作成したページを見るべきです.

これらの手順の最後には、次のアーキテクチャが必要です.

├── index.html
├── package.json
├── tsconfig.json
├── webpack.config.js
├── src
│    ├── shims-vue.d.ts
│    └── main.ts

コンポーネントを作りましょう

今では、アプリケーションを構築するために必要な環境は、最初のVue 3コンポーネントを作成を開始する準備が整いました.
まず最初に、新しいファイルをApp.vue インサイドsrc 次のフォルダ

<template>
  <h2>This is a Vue 3 component!</h2>
  <button @click="increase">Clicked {{ count }} times.</button>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
export default defineComponent({
  setup() {
    const count = ref(0)
    const increase = () => {
      count.value++
    }

    return {
      count,
      increase,
    }
  }
});
</script>

あなたが見ることができるように、新しいVueコンポーネントを作成するVueclass MyClass extends Vue {} , 現在Vue 3提供defineComponent() 関数.
インサイドdefineComponent() あなたが見ることができる機能setup 関数は最初の引数として小文字を受け取ります.この場合、APPコンポーネントはトップレベルのコンポーネントになりますので、小道具は渡されません.
また、コードからわかるように、setup() 次に、テンプレートからアクセスできます.
Vueコンポーネントが作成されましたので、main.ts ファイルは次のようになります.

import {createApp} from 'vue';
import App from './App.vue';

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

また、この例では、どのようにVueの以前のバージョンに比べてそれはもはや新しいアプリケーションを初期化する必要はありませんを参照することができますconst app = new Vue (....).$Mount('# app') しかし、Vue 3では、機能を使用することが可能ですcreateApp() とmount() DOMセレクタへのアプリケーションのバインド方法です.
最後に、最後のステップはindex.html 前のステップでVueに指定されたセレクタを含むファイル

<h1>Hello Vue 3!</h1>

<div id="app"></div>

<script src="/dist/main.js"></script>

この時点でアプリケーションを再起動しますyarn dev あなたが作成した新しいVueコンポーネントで再生を開始することができます.

回収する

このポストでは、私はVue 3、構成APIとtypescriptを使用して非常に単純なコンポーネントを作成する方法を示しました.明らかに私は氷山のちょうど先端をひっかいて、Vue 3で試みるために1000の他の特徴があります、しかし、この単純な構成要素ですでにそれはVueの次のリリースで構成要素を定義することが可能である新しい「機能的な」アプローチを評価することが可能です.
ps :すべてのコードが利用可能ですGitHub .
私に手を伸ばす自由に!Blog (in italian) || || GitHub ||