随着 Vue3.0 的发布，Vite 也逐渐进入我们的视野中了
1. 首先看看 Vite 的特点有哪些？
- 极速的服务启动
- 轻量快速的热重载
- 优化的构建
- 丰富的功能
2. 初始化项目
- 全局安装 Vite
npm i -g Vite
- 创建项目
yarn create @vitejs/app
//通过附加的命令行选项直接指定项目名称和你想要使用的模板
yarn create @vitejs/app my-vue-app --template vue
- 进入项目，安装依赖
cd <project-name>
yarn # 或 npm i
- 运行项目
yarn dev
//打开浏览器 http://localhost:3000 查看
3. 安装我们的 vue-router 和 vuex
//这里要注意要用新的版本
yarn add vue-router@next vuex@next
4. 安装 tailwindcss 作为我们的样式库
yarn add tailwindcss
5. 引入 vue-router
在 src 目录下创建以下目录：
- src
|- router
| |- index.js
|- views
|- Home.vue
|- Test.vue
在 index.js 中添加如下代码：
import { createRouter, createWebHistory } from 'vue-router'
// 开启历史模式
const routerHistory = createWebHistory();
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
component: () => import('../views/Home.vue')
},
{
path: '/test',
component: () => import('../views/Test.vue')
}
]
})
export default router
然后添加如下代码进行测试：
//app.vue
<template>
<router-view></router-view>
</template>
//home.vue
<template>
<div>
<router-link to='/'>Home </router-link>
<router-link to='/test'> Test</router-link>
</div>
</template>
6. 引入 Vuex
在 src 目录下创建 store 目录，在里面创建几个文件：
- store
|- state.js
|- getters.js
|- mutations.js
|- actions.js
|- index.js
写入如下内容：
// state.js
let state = {}
export default state
// getters.js
let getters = {}
export default getters
// mutations.js
let mutations = {}
export default mutations
// actions.js
let actions = {}
export default actions
// index.js
import { createStore } from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default createStore({
state,
getters,
mutations,
actions
})
7. 可以创建 vite.config.js 进行配置
const path = require('path')
module.exports = {
alias: {
'/@/': path.resolve(__dirname, './src')
},
proxy: {
'/api': {
target: 'http://127.0.0.1:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
}
}
8. 中途踩了的坑
- vue-router 的版本问题
- vuex 的版本问题
9. 体验
- Vite 开发模式下，是真的快。
