Vue3+vite+tsプロジェクト構築

ノード環境の準備

node -v  //查看node版本,Vite 需要 Node.js 版本 >= 12.0.0

viteをインストールする

npm init vite@latest //或者yarn create vite

インストールが成功したら、次の図に示すように、矢印キーで vue Enter キーを選択します。
ここに画像の説明を挿入
選択後、次の図に示すように、矢印キーで vue-ts Enter キーを選択します。

プロンプトコマンドに従ってプロジェクトディレクトリに移動し、依存する実行スクリプトをインストールします。プロンプトコマンドは次の図に示すとおりです。実行が
ここに画像の説明を挿入
完了すると、次のプロンプトが表示され、プロジェクトの初期化が成功したことがわかります。http を

コピーします。 //localhost:3001/ リンクまたは Ctrl + マウスの左ボタンブラウザで
vscode エディターのインストールを開きます。Volar
には、vetur が原因で ts サポートにいくつかの問題があります。vetur をアンインストールまたは無効にして、Volar プラグインを直接インストールすることをお勧めします。
プロジェクトElement Plusを統合

 npm install element-plus --save //或yarn add element-plus

自動オンデマンドインポート
Element Plus ドキュメントで推奨されている unplugin-vue-components および **unplugin-auto-import** プラグインは、自動オンデマンドインポートを実現できます。

npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts に次の設定を追加します。

// 
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
    
     ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
    
    
  plugins: [
    // ...
    AutoImport({
    
    
      resolvers: [ElementPlusResolver()],
    }),
    Components({
    
    
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

この方法では、新しいコンポーネントが使用されるたびにプロジェクト統合 vue-router を手動でインポートする必要がありません。

npm install vue-router@4

注: vue3 で vue-router 4.x を使用するバージョンは、以前のバージョンとは記述上大きく異なります。

// 以前是
// import Router from 'vue-router'
//我们需要new Router()

//在src目录下新建router文件夹 ,在router文件夹中新建index.ts,写入如下代码
//在src目录下新建views文件夹,在views文件夹下新建Home.vue文件
import {
    
     createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'//引入自己建的vue组件
const routes: RouteRecordRaw[] = [
  {
    
    
    path: '/',//必填项
    component: Home,//必填项
  },
]
const router = createRouter({
    
    
  history: createWebHistory(),
  routes,
})
export default router

main.ts ファイルのコードを次のように変更します。

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
const app = createApp(App)
app.use(router).mount('#app')

これまでに Element Plus と vue-router を統合しました。検証してみましょう
。Home.vue ファイルのコードを次のように変更します。

<script setup lang="ts">
import {
    
     ref } from 'vue'
// defineProps<{ msg: string }>()
const count = ref(5)
console.log(count.value)
</script>

<template>
  //直接使用 Element Plus的button组件
  <el-button type="primary" @click="count++">count is: {
    
    {
    
     count }}</el-button>
</template>

<style scoped></style>

App.vue のコードを次のように変更します。

<template>
  <router-view></router-view>
</template>
<script setup lang="ts"></script>

<style></style>

コマンドラインに npm run dev と入力してプロジェクトを開始すると、Local: http://localhost:3001/ が表示され、ブラウザに Local: を入力すると次のアドレスが表示されます。

もう終わりにしましょう

Vue3+vite+tsプロジェクト構築

おすすめ