用Vue + Vite + ts + ElementPlus創建新項目並配置router

自己鑽研如何用Vue3.2+Vite創建新項目，話說vite是真的快，只是不能像原生Vue創建項目時一起把router構建好，所以必須先構建項目，再手動配置router，稍微麻煩一點，但是熟悉之后會覺得vite的速度是完全值得多花這么一點功夫的。現在就記錄一下如何構建一個項目。

1. 首先來安裝vite和創建一個項目（myProject）, vite 官網：https://vitejs.cn/

1. 首先安裝vite, 這個很簡單了：

   npm init vite@latest
   

2. 用Vue + vite創建項目

   npm init @vitejs/app my-project
   

3. 進入項目目錄並運行看是否搭建成功

   cd my-project
   
   npm install
   npm run dev
   

   如果成功，終端會有如下提示：

   

4. 然后在瀏覽器中打開http://localhost:3000/ 顯示如下頁面：表示項目創建成功

   

2. 然后來配置一下靜態路由

1. 安裝路由

   npm install vue-router --save
   

2. 創建router文件夾和路由文件 index.ts

3. 配置路由文件index.ts (如下代碼配置"/" 跳轉至views文件夾下Home.vue頁面)

import {createRouter,createWebHistory} from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "home",
            component: () => import("../views/Home.vue")
        }
    ]
})

export default router

4. 在main.ts中導入並掛載到app上

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


const app = createApp(App)
app.use(router).mount('#app')

5. 創建views文件夾以及一個Home.vue來測試路由是否配置成功

Home.vue頁面：

<template>
  <div>
      <h1>This is HomePage!!</h1>
  </div>
</template>

<script setup lang='ts'>

</script>

<style lang='less' scoped>
</style>

6. 修改app.vue文件，加入路由跳轉：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <router-view />
</template>

7. 啟動項目測試結果如下：

   

3. 配置好之后就可以安裝ElementPlus了

(ElemenPlus 官網: https://element-plus.gitee.io/zh-CN/)

1. 首先來安裝包：

npm install element-plus --save

2. 完整導入項目（會使項目大小增加很多，可以按需導入）

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

const app = createApp(App)
app.use(ElementPlus).use(router).mount('#app')

以上就可以開始使用ElementPlus組件了

4. 現在讓我們來測試一下所有的功能：

1. 首先在views下創建一個bottons.vue組件來做測試頁：

2. 然后把bottons.vue路徑添加到router的index.ts配置中

import {createRouter,createWebHistory} from 'vue-router'

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "home",
            component: () => import("../views/Home.vue")
        },
        {
            path: "/btns",
            name: "bottons",
            component: () => import("../views/bottons.vue")
        }
    ]
})

export default router

3. 按照ElementPlus 官網的組件示例把代碼插入bottons.vue 中

   官網示例：

​ 將如上的示例代碼插入bottons.vue ：

<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    <el-button>中文</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>
</template>

<script lang="ts" setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

4. 運行項目，訪問http://localhost:3000/btns , 結果如下:

插件使用成功!!