什么是vite
Vite
Vite
是面向现代浏览器,基于原生模块系统 ESModule
实现了按需编译的Web
开发构建工具,基于Rollup打包.
优点
- 快速启动冷服务器
- 即时热模块更换(HMR)
- 真正的按需编译
vite初始化
npm
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
yarn
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
尽管
Vite
最初旨在与Vue 3
配合使用,但它也可以支持其他框架.例如,尝试npm init vite-app --template react
或--template preact
在这里我们是用
npm init vite-app vite-ts-vue
配置依赖
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
项目配置
配置 vite.config.js
这个类似`vue-cli里面的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"]
},
}
配置main.ts
- 修改
main.js
为main.ts
,因为我们项目需要使用typescript
开发 - 修改
index.html
...
<script type="module" src="/src/main.js"></script>
...
如果不这样修改的话,会出现
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;
- 新建页面
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>
3.修改index.css
为index.less
因为我们项目中使用less
,如果你希望使用sass
的话,那么在安装依赖的时候安装sass
...
npm i sass --save-dev
...
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')
优化TS类型推断
在src
目录下创建shims.d.ts
、source.d.ts
shims.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
declare module 'element-ui/lib/locale/lang/*' {
export const elementLocale: any
}
declare module '*.gif' {
export const gif: any
}
source.d.ts`
declare module '*.json';
declare module '*.png';
declare module '*.jpg';
具体代码见github
评论区