用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 , 结果如下:

插件使用成功!!