基于vite 初始化vue3项目并引入Vue Router和Ant Design Vue

基于vite 初始化vue3项目并引入常用的功能、组件。

• Vue Router
• Ant Design Vue

系列文章指路👉

系列文章-基于Vue3创建前端项目并引入、配置常用的库和工具类

创建Vite+Vue项目

使用之前需要升级node到18+

创建并运行

1. npm create vite@latest vue-test -- --template vue
2. cd vue-test
3. npm install
4. npm run dev
   

WebStorm无法识别@，需要在vite.config.js中定义alias

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {resolve} from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      "@": resolve(__dirname, "src"),
    }
  },
})

引入Vue Router

1. 安装依赖

npm install vue-router@4

2. 初始化index.js

引用官方文档的例子，区别不同的是：路由模式使用的history。

import * as VueRouter from 'vue-router' // 这行一定要加，不然程序会报错

// 1. 定义路由组件
const testA = import('@/view/test/testA.vue')
const testB = import('@/view/test/testB.vue')

// 2. 定义一些路由
const routes = [
    { path: '/testa', component: testA },
    { path: '/testb', component: testB },
]

// 3. 创建路由实例并传递 `routes` 配置
const router = VueRouter.createRouter({
    // 4. 使用 history 模式的实现。
    history: VueRouter.createWebHistory(),
    routes: routes,
})

export default router

3. main.js中挂在到app上

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "@/router/index.js";

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

4. App.vue

<template>
  <router-link to="/testa">Go to A</router-link>
  <router-link to="/testb">Go to B</router-link>
  <router-view></router-view>
</template>

只是个测试页面，在A和B之间反复横跳

引入Ant Design Vue

安装依赖

npm install ant-design-vue@4.x --save

使用自动按需引入

npm install unplugin-vue-components -D

尝试一下

<template>
  <h1>
     Ant Design Vue Test
  </h1>
  <div>
    <a-space>
      <a-input-search
          v-model:value="value"
          placeholder="input search text"
          style="width: 250px"
          @search="onSearch"
      />
      <a-button type="primary">Button</a-button>
    </a-space>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const value = ref('');
const onSearch = searchValue => {
  console.log('use value', searchValue);
  console.log('or use this.value', value.value);
};
</script>

<style scoped>

</style>