# 什么是vite
# Vite (opens new window)
Vite是面向现代浏览器,基于原生模块系统 ESModule 实现了按需编译的Web 开发构建工具,基于Rollup (opens new window)打包.
# 优点
- 快速启动冷服务器
- 即时热模块更换（HMR）
- 真正的按需编译
# vite初始化
npm
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
1
2
3
4
2
3
4
yarn
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
1
2
3
4
2
3
4
尽管
Vite最初旨在与Vue 3配合使用,但它也可以支持其他框架.例如,尝试npm init vite-app --template react或--template preact
# 在这里我们是用
npm init vite-app vite-ts-vue
1
# 配置依赖
cd vite-ts-vue
npm install // 安装项目依赖
npm i -S typescript vue-router@next // 集成 TypeScript vue-router
npm i -D eslint eslint-plugin-vue // 集成 eslint
npm i less --save-dev // 集成css预编译less
npm run dev
1
2
3
4
5
6
2
3
4
5
6
# 项目配置
# 配置 vite.config.js
这个类似`vue-cli (opens new window)里面的vue.config.js
import path from 'path'
module.exports = {
// 导入文件夹别名
alias: {
'/@/': path.resolve(__dirname, './src'),
'/@views/': path.resolve(__dirname, './src/views'),
'/@components/': path.resolve(__dirname, './src/components'),
'/@utils/': path.resolve(__dirname, './src/utils'),
},
// 配置Dep优化行为
optimizeDeps: {
include: ["lodash"]
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 配置main.ts
- 修改
main.js为main.ts,因为我们项目需要使用typescript开发 - 修改
index.html
...
<script type="module" src="/src/main.js"></script>
...
1
2
3
2
3
如果不这样修改的话,会出现
main.js找不到,其实这就是入口文件
# 配置router
- 在
src中新建router文件夹,并在文件夹里面创建index.ts
import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router';
const routes: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: import('/@views/index.vue'),
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 新建页面
index.vue
<template>
<div>
Home
{{title}}
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
setup(){
const title=reactive<String>("标题")
return {title}
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3.修改index.css为index.less
因为我们项目中使用less,如果你希望使用sass的话,那么在安装依赖的时候安装sass
...
npm i sass --save-dev
...
1
2
3
2
3
4.在main.ts中引入router
import { createApp } from 'vue'
import App from './App.vue'
import './index.less'
import router from './router/index'
createApp(App).use(router).mount('#app')
1
2
3
4
5
2
3
4
5
# 优化TS类型推断
在src目录下创建shim.d.ts、source.d.ts
shim.d.ts
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
1
2
3
4
2
3
4
source.d.ts`
declare module '*.json';
declare module '*.png';
declare module '*.jpg';
1
2
3
2
3
← Vue-next vue-next 迁移 →