Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。

上面是官方对vite的一个定义，需要明白的是，vite不仅能创建vue项目，同样可以使用vite创建react项目。

npm create vite@latest

运行命令后，按照指引一步步进行，即可创建一个vue3的工程，命令行运行界面如下图所示：

其中在第二个选择：select a framework操作时，选择vue即可。

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

按照完成后，就可以看到我们熟悉的三行指引代码，先切换到项目目录，再安装依赖，最后npm run dev运行项目。

使用浏览器打开：http://127.0.0.1:5173/

当我们能够通过浏览器看到这个界面，就表示vue3项目使用vite创建成功了。下面需要安装开发经常需要用到的组件：

1、UI组件：Element Plus

npm install element-plus --save

2、HTTP库：axios

npm install axios

3、安装路由：vue-router

npm install vue-router@4

src目录下，添加router/index.js，下面是index.js的内容，一个最基础的写法：

import { createRouter,createWebHashHistory } from 'vue-router'
//两种定义路由的方法
import Home from '../views/Home.vue'
const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/about',
        name: 'About',
        component: () => import("../views/About.vue")
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes
})
export default router

打开main.js，引入router

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

4、vuex

npm install vuex@next --save

src目录下，添加store/index.js，下面是index.js的内容，一个最基础的写法：

import { createStore } from 'vuex'
export default createStore({
    state: {
        num:0,
    },
    mutations: {
    },
    actions: {
    },
    modules: {
        
    }
})

打开main.js，引入vuex