Vite がバージョン 2.x をリリースしました。学習目的で簡単なプロジェクトを作成することにしました。フロントエンド開発者なら必ず知っておくべき element-plus と typescript を組み合わせて、以下の内容を実装しました。 vite は、ネイティブ ESM を搭載した Web 開発ビルド ツールです。開発環境ではブラウザのネイティブESインポートをベースに開発し、本番環境ではRollupをベースにパッケージ化します。 バイト機能
使用環境
プロジェクトを構築するnpm init vite-app <プロジェクト名> cd <プロジェクト名> npmインストール npm 実行 dev または yarn create vite-app <プロジェクト名> cd <プロジェクト名> 糸 糸開発 構成vite.config.tsvite.config.ts は @vue-cli プロジェクトの vue.config.js と同等です。 「path」からパスをインポートします。 const pathResolve = (pathStr: 文字列) => { path.resolve(__dirname, pathStr) を返します。 } 定数設定 = { base: './', // 本番環境で提供する際の基本パブリックパス。 @デフォルト '/' エイリアス: { '/@/': パスを解決します('./src'), }, outDir: 'vite-init', // ビルド出力が配置される場所。ビルド前に古いディレクトリは削除されます。 @default 'dist' minify: 'esbuild', //ビルド時の圧縮方法 hostname: 'localhost', //ローカルサービスアドレス port: '8800', //サービスポート番号 open: false, //サービス起動時にブラウザでhttpsを開くかどうか: false, //httpsを開くかどうか ssr: false, //サーバー側でレンダリングするかどうか optimizeDeps: { //サードパーティの設定を導入 include: ['axios'] }, // proxy:{// プロキシ設定 // '/api': { // ターゲット: 'http://xx.xx.xx.xx:xxxx', // 変更元: true、 // ws: true、 // 書き換え: (path: string) => { path.replace(/^\/api/, '') } // } // } } モジュールをエクスポートします。 tsconfig.json{ "コンパイラオプション": { "target": "ES5", // ECMAScript のターゲット バージョンを指定します: 'ES3' (既定値)、'ES5'、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020'、または 'ESNEXT'。 "module": "commonjs", // モジュール コード生成を指定します: 'none'、'commonjs'、'amd'、'system'、'umd'、'es2015'、'es2020'、または 'ESNext'。 "strict": true, // すべての厳密な型チェック オプションを有効にするかどうか。 "baseUrl":"./", // 絶対でないモジュール名を解決するために使用されるベース ディレクトリ。 「パス」: { "/@/*": ["./src/*"] }, "noImplicitAny": true, //暗黙的な 'any' 型を持つ式と宣言に対してエラーを発生させます。 "esModuleInterop": true, //すべてのインポートに対して名前空間オブジェクトを作成して、CommonJS モジュールと ES モジュール間の相互運用性を有効にします。 「allowSyntheticDefaultImports」を意味します。 "experimentalDecorators": true, // ES7 デコレータの実験的なサポートをサポートします。 "skipLibCheck": true, //宣言ファイルの型チェックをスキップします。 "forceConsistentCasingInFileNames": true // 同じファイルへの大文字と小文字の不一致な参照を無効にします。 } } アプリ.vueapp.vue を変更する <テンプレート> <img alt="Vue ロゴ" src="./assets/logo.png" /> <ルータービュー /> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: 'アプリ'、 設定() { } } </スクリプト> ビューsrcの下に新しいviewsフォルダを作成し、そのフォルダにindex.vueを作成します。 <テンプレート> <HelloWorld :msg="メッセージ"></HelloWorld> </テンプレート> <script lang="ts"> 「/@/views/HelloWorld.vue」からHelloWorldをインポートします。 「vue」からdefineComponentをインポートします。 エクスポートデフォルトdefineComponent({ 名前: "ホーム", コンポーネント: { HelloWorld }, 設定() { 戻る { メッセージ: 「こんにちは世界」、 }; }, }); </スクリプト> PS: .vueファイルをインポートするときは、必ずサフィックスを付けてください。そうしないと、ファイルが見つからないと報告されます。 viewsフォルダにHelloWorld.vueを作成します。 <テンプレート> <h1>{{ メッセージ }}</h1> <button @click="realTime.count++">カウントは: {{ realTime.count }}</button> <button @click="handleclick">クリックすると他のルートにジャンプします</button> <p>ホット モジュール置換をテストするには、<code>components/HelloWorld.vue</code> を編集します。</p> </テンプレート> <スクリプト> 「vue」から、defineComponent、reactive をインポートします。 'vue-router' から { useRouter } をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'インデックス'、 プロパティ: { メッセージ: { タイプ: 文字列、デフォルト: 'vue3 へようこそ' } }, セットアップ(プロパティ) { 定数ルーター = useRouter(); realTime = reactive({ count: 0 } とします); 関数handleclick() { router.push({ パス: '/other' }) } 戻る { メッセージ: props.msg、 リアルタイム、 ハンドルクリック } } }) </スクリプト> ルーターsrcの下に新しいルーターフォルダを作成し、そのフォルダにindex.tsを作成します。 'vue-router' から {createRouter、createWebHistory、RouteRecordRaw} をインポートします。 const ルート: Array<RouteRecordRaw> = [ { パス: '/'、 コンポーネント: () => import("/@/views/index.vue") }, ] エクスポートデフォルトcreateRouter({ 履歴: createWebHistory(), ルート }) メイン.ts元の main.js を main.ts に変更します。変更後、index.html も main.ts に変更することを忘れないでください。 'vue' から {createApp} をインポートします。 './router/index' からルーターをインポートします './App.vue' からアプリをインポートします。 'element-plus' から ElementPlus をインポートします 'element-plus/lib/theme-chalk/index.css' をインポートします。 './reset.css' をインポートします const app = createApp(App); app.use(ElementPlus); app.use(ルーター); app.mount('#app'); 注意深い学生はこの時点で発見したかもしれません:.vueファイルがtsファイルに導入されると次のエラーが発生しますが、コードの通常の動作には影響しません。 エラーの理由: Typescript は .ts ファイルのみを理解でき、.vue ファイルは理解できません 解決策: プロジェクトのルート ディレクトリまたは src フォルダーに、サフィックスが .d.ts のファイルを作成し、次の内容を記述します。 モジュール '*.vue' を宣言します { } モジュール '*.js' を宣言します モジュール '*.json' を宣言します。 モジュール '*.svg' を宣言します モジュール '*.png' を宣言します モジュール '*.jpg' を宣言します モジュール '*.jpeg' を宣言します モジュール '*.gif' を宣言します モジュール '*.bmp' を宣言します モジュール '*.tiff' を宣言します プロジェクトが完了したので、安心してコードを記述できます。 vite+vue3.0+ts+element-plus クイックプロジェクト構築の実装に関するこの記事はこれで終わりです。vite+vue3.0+ts+element-plus 構築に関する関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL でデータをクエリし、条件に基づいて別のテーブルに更新する方法の例
新しく作成された Web サイトの場合は、ASP.NET MVC5 を例に挙げます。セッションを処理...
目次1. 解凍する2. データフォルダを作成する3. MySQLに環境変数を追加する3.1 コントロ...
mysql のインストール情報を表示します。 #ps -ef | grep mysql usr/bi...
この記事では、キャンバスとjsを使用して簡単な飛行機戦争を実装する方法を参考までに紹介します。具体的...
目次実装効果図依存関係をインストールするカスタムツリーコントロールその他の実装要約するVueでは、要...
MySQLインストールチュートリアル、参考までに具体的な内容は次のとおりです。 1. ダウンロードY...
CSSスタイルの分類1. 内部スタイル ---- インラインスタイルスタイルタグの使用 <ス...
IPSec の概要IPSec (インターネット プロトコル セキュリティ): ネットワーク層と適用さ...
ほとんどのブラウザはデフォルトで入力値をキャッシュし、ctl+F5 を使用して強制的に更新することに...
効果は非常にシンプルで、次のコードを自分のページにコピーして実行するだけです。コードをコピーコードは...
目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...
目次方法1方法2 nginxをインストールした後、PHPコードを解析できないことがわかりました。解決...
CSS3 は反転可能なホバー効果を実装します。具体的なコードは次のとおりです。 1.css /*基本...
序文最近、いくつかのフロントエンド プロジェクトに取り組んでおり、ページにいくつかのテーブルを表示す...
シェル スクリプト言語は、すべてのプログラミング言語の中で最も単純な言語であるため、資格のある Li...