官方地址
vite的介绍
Vite
是Vue
作者尤雨溪又一个备受关注的开源项目,它是一个前端构建工具,可类比Webpack
。它主要解决了传统bundle-base
vite 概念 Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具 它基于 ECMASCRIPT 标准原生模块系统 (ES Modules)实现
解决webpack 开发阶段 devServer 冷启动时间过长,HMR 热更新反应速度慢的问题;能够显著提升前端开发体验
Vite 特性
闪电般的冷启动速度,即时热模块更换,真正的按需编译,开箱即用
vite和webpack的区别及优势
vite 优点
webpack服务器启动速度比vite慢
由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显
vite热更新比webpack快
vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译;
vite使用esbuild(Go 编写) 预构建依赖,而webpack基于nodejs, 比node快 10-100 倍vite 缺点
生态不及webpack,加载器、插件不够丰富
打包到生产环境时,vite使用传统的rollup进行打包,生产环境esbuild构建对于css和代码分割不够友好。所以,vite的优势是体现在开发阶段
没被大规模重度使用,会隐藏一些问题
项目的开发浏览器要支持esmodule,而且不能识别commonjs语法
安装命令
创建一个文件夹
npm create vite@latest
回车选择 vue
回车选择 vue-ts
创建成功 cd 到根文件夹(vite-project)里面
创建vuex
在src里面新建 store文件夹创建 index.ts 文件
import { createStore } from "vuex";
export default createStore<any>({
state: {}, // 数据源存放地
getters: {}, // vuex 的计算属性
mutations: {}, // 操作state数据的方法
actions: {}, // 用来做异步操作发送请球
modules: {}, // 模块化vuex
plugins: [], // 使用插件的地方
// 开启严格模式
strict:true
})
main.ts 文件
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'// 引入
createApp(App).use(store).mount('#app') // 使用
配置路由
在src下面创建一个 view 文件 在里面创建一个 index.vue home.vue 文件 文件里面要写如内容
index.vue文件 的内容 还有一个 home.vue (自己创建)
<template>
<div class="wrap-box">首页</div>
</template>
<script lang="ts" setup>
import {
ref,
reactive,
toRefs,
computed,
onMounted,
watchEffect,
watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const route = useRoute();
const router = useRouter();
const data = reactive({
// 数据源的存放地
});
onMounted(() => {
// 初始化渲染
});
</script>
<style lang="scss" scoped>
.wrap-box {
}
</style>
在src里面新建 router文件夹创建 index.ts 文件
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../view/index.vue'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'index',
component: HomeView,
},
{
path: '/home',
name: 'home',
component: () => import('../view/home.vue')
}
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
在main.js文件里面引入
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
清除vite自带的文件
找到 App.vue 写入
<template>
<!-- 入口显示路由 -->
<router-view></router-view>
</template>
<script setup lang="ts"></script>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
</style>
components 清除 HelloWorld.vue 文件 (如果没有引入HelloWorld.vue 文件 还是显示引入了重新启动)
tsconfig.json 文件夹写入
{
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"] ,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
vite.config.ts 文件夹
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }): any => {
// 如果是command:serve|build
// mode:development | production
const BASE_URL = command === 'serve' ? '/' : '/'
return {
// 自定义全局变量
define: {
'process.env.BASE_URL': `"${BASE_URL}"`
},
plugins: [vue()],
// 设置路径别名
resolve: {
alias: {
"@": resolve(__dirname, 'src'),
},
extensions: ['.js', '.json', '.ts', '.vue'] // 使用路径别名时想要省略的后缀名,可以自己 增减
}
}
})
package.json 文件夹下载依赖
{
"name": "yiyun-shop",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@kangc/v-md-editor": "^2.3.14",
"axios": "^0.26.1",
"element-plus": "^2.1.4",
"vue": "^3.2.25",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
"devDependencies": {
"@types/node": "^17.0.22",
"@vitejs/plugin-vue": "^2.2.0",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"typescript": "^4.5.4",
"vite": "^2.8.0",
"vue-tsc": "^0.29.8"
}
}
执行 npm i 把依赖下载好
完成
npm run dev 执行即可
总结
Vite,就像刚出来的
M1
芯片Mac
,都说好,但是一开始买的人不多,担心生态问题,后面都说真香相信vue3作者的大力支持下,
vite
即将大放异彩!我已经在我自己项目的生产环境中,开始使用vite!