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 でデータをクエリし、条件に基づいて別のテーブルに更新する方法の例
Vue では、一般的にフロントエンドとバックエンドを分離したプロジェクトがあり、データ操作を実装する...
私はグレースケールの画像の方が芸術的に見えると思うので、いつもグレースケールの画像を好んで使っていま...
1. Nginxの同時実行性を最適化する [root@proxy ~]# ab -n 2000 -c...
この記事では、jsネイティブカルーセルプラグインの具体的なコードを参考までに共有します。具体的な内容...
mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...
MySQL での SQL モードの表示と設定MySQL はさまざまなモードで実行でき、さまざまなシナ...
目次1. setTimeout() タイマー2. setTimeout() タイマーを停止する3. ...
序文:この記事では主に、MySQL の where、group by、order by、limit、...
HTTP ヘッダーの説明1. Accept: Web サーバーに受け入れるメディア タイプを通知しま...
ant-design-vue テーブルのスケーラブルな列の問題に対する完璧なソリューション。固定列と...
GNU Parallel は、1 台以上のコンピューター上で計算タスクを並列に実行するためのシェル ...
達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...
設定手順1. DNSが設定されているかどうかを確認するDNSが設定されていない場合は、前の記事を参照...
0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...
主キー:キーワード: 主キー機能: null にすることはできず、一意である必要があります。主キーの...