认识Vite
什么是vite呢？
官方的定位：下一代前端开发与构建工具；
如何定义下一代开发和构建工具呢？
我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等 等； p所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel； p但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多； p构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来；
所以也有这样的说法：天下苦webpack久矣；
Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。
vite的构造
它主要由两部分组成：
一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；
一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源；
是否学习
目前是否要大力学习vite？vite的未来是怎么样的？
我个人非常看好vite的未来，也希望它可以有更好的发展；
但是，目前vite虽然已经更新到2.0，依然并不算非常的稳定，并且比较少大型项目（或框架）使用vite来进行 构建；
vite的整个社区插件等支持也还不够完善；
包括vue脚手架本身，目前也还没有打算迁移到vite，而依然使用webpack（虽然后期一定是有这个打算的）；
所以vite看起来非常的火热，在面试也可能会问到，但是实际项目中应用的还比较少；
浏览器原生支持模块化的缺点
文件目录
main.js
import {sum} from './js/sum.js'
console.log("this is main.js");
console.log(sum(100,200));
sum.js
export function sum(num1,num2) {
return num1+num2
}
index.html
<!DOCTYPE html>
<html lang="zh">
<body>
<script src="./src/main.js" type="module" ></script>
</body>
</html>
输出效果
总结
使用原生的浏览器加载模块化,需要在import中引入后缀,在script标签中加入类型type
命令行
npm init
输出结果
命令行:安装lodash-es
npm install lodash-es
输出
main.js
原生如何引用node module中的模块
反正就是要写全,这里模块比较少,还好写,可以一旦多了起来,那就不得了了.
import _ from '../node_modules/lodash-es/lodash.default.js'
import {sum} from './js/sum.js'
console.log("this is main.js");
console.log(sum(100,200));
console.log(_.join([1,2,3],'+'));
输出
缺点
因为这个lodash-es又依赖其他js文件,所以会有很多请求,所以请求次数又六百多此,同时请求时间太长,严重消耗了浏览器的性能.
vite的安装
Node版本是大于12版本的,在命令行输入:
npm install vite –g # 全局安装
npm install vite –D # 局部安装
输出
vite的使用
命令行输入
npx vite
输出
main.js
import _ from 'lodash-es'
import {sum} from './js/sum'
console.log("this is main.js");
console.log(sum(100,200));
console.log(_.join([1,2,3],'+'));
输出
vite的好处
发现我们修改import名称之后,这个请求次数变少了,当然请求耗时也是变短了.
引入CSS文件
引入CSS文件:style.css
body {
background-color: pink;
}
输出
引入less文件
src>css>title.less
@fontSize:100px;
@fontColor:blueviolet;
.title {
font-size: @fontSize;
color: @fontColor;
}
输出
输出
没有less处理器
安装less:命令行
npm install less -D
运行
npx vite之后输出
引入postcss
安装postcss和postcss-preset-env:命令行
npm install postcss -D
npm install postcss-preset-env -D
编写配置文件
postcss.config.js
module.exports = {
plugins:[
require('postcss-preset-env')
]
}
输出
可以自动帮我们添加浏览器内核前缀
引入TypeScript
src>ts>mul.ts
export default function(num1:number,num2:number):number{
return num1*num2
}
src>main.js引入关键代码
import _ from 'lodash-es'
import {sum} from './js/sum'
import mul from './ts/mul'
import './css/style.css'
import './css/title.less'
console.log("this is main.js");
console.log(sum(100,200));
console.log(_.join([1,2,3],'+'));
console.log(mul(200,300));
const titleEl = document.createElement('div')
titleEl.className = 'title'
titleEl.innerHTML = 'Hello Vite'
document.body.appendChild(titleEl)
输出
引入Vue
安装vue:命令行输入
npm install vue@next -D
编写vue文件:src>vue>App.vue
<template>
<div>
<h2>{{message}}</h2>
</div>
</template>
<script>
export default {
data(){
return {
message:'this is App.vue'
}
}
}
</script>
<style scoped>
.h2{
color: hotpink;
}
</style>
引入Vue文件:main.js
关键代码
import _ from 'lodash-es'
import {createApp} from 'vue'
import {sum} from './js/sum'
import mul from './ts/mul'
import App from './vue/App.vue'
import './css/style.css'
import './css/title.less'
console.log("this is main.js");
console.log(sum(100,200));
console.log(_.join([1,2,3],'+'));
console.log(mul(200,300));
const titleEl = document.createElement('div')
titleEl.className = 'title'
titleEl.innerHTML = 'Hello Vite'
document.body.appendChild(titleEl)
createApp(App).mount('#app')
主页:index.html
关键代码
<!DOCTYPE html>
<html lang="zh">
<body>
<div id="app"></div>
<script src="./src/main.js" type="module" ></script>
</body>
</html>
运行服务器:命令行
npx vite
输出报错
上午7:20:56 [vite]
#内部服务器错误：
#无法分析导入分析的源
#因为内容包含无效的JS语法。
Internal server error:
Failed to parse source for import analysis
because the content contains invalid JS syntax.
#安装 @vitejs/plugin-vue 插件来处理 .vue 的文件
Install @vitejs/plugin-vue to handle .vue files.
Plugin: vite:import-analysis
File: F:/00、coderwhy_Vue3+TypeScript/课堂资料day01_27/课堂/code/02_Learn_Webpack/10_vite的基本使用_2/src/vue/App.vue
安装@vitejs/plugin-vue插件,并再次运行,结果不行
npm install @vitejs/plugin-vue -D
npx vite
配置插件:vite.config.js,然后再次运行
const vue = require('@vitejs/plugin-vue')
module.exports = {
plugins:[
vue()
]
}
输出继续报错
原因
缺少插件Cannot find module '@vue/compiler-sfc'
PS F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack\10_vite的基本使用_2> npx vite
failed to load config from 'F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack\10_vite的基本使用_2\vite.config.js'
error when starting dev server:
Error: Cannot find module '@vue/compiler-sfc'
1.安装 '@vue/compiler-sfc'插件:命令行输入
2.再次运行
npx vite
npm install @vue/compiler-sfc -D
成功输出
vite编译快的原因
这里也就解释vite编译快的原因,有个预编译,可以重复使用,知道改变的时候,才会重新编译这个预编译的东西
vite项目的打包
打包项目到dist文件夹
npx vite build
输出
预览打包之后的vite项目
预览打包之后的vite项目
npx vite preview
创建脚本
package.json
关键代码
{
"name": "learn_vite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"serve":"vite",
"build":"vite build",
"preview":"vite preview"
},
"author": "",
"license": "ISC",
"dependencies": {
"lodash-es": "^4.17.21"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.6.0",
"@vue/compiler-sfc": "^3.2.6",
"less": "^4.1.1",
"postcss-preset-env": "^6.7.0",
"vite": "^2.5.0",
"vue": "^3.2.6"
}
}
vite脚手架工具
安装
全局安装
npm install @vitejs/create-app -g
使用
使用脚手架创建工程
create-app [项目名称]
PS F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack>
create-app 11_vite_cli_demo_2
@vitejs/create-app is deprecated, use npm init vite instead
√ Select a framework: » vue
√ Select a variant: » vue-ts
Scaffolding project in F:\00、coderwhy_Vue3+TypeScript\课堂资料day01_27\课堂\code\02_Learn_Webpack\11_vite_cli_demo_2...
Done. Now run:
cd 11_vite_cli_demo_2
npm install
npm run dev
输出
