日常生活的交流与学习

首页 新随笔 联系 管理
vi_viteLearnNote

认识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看起来非常的火热，在面试也可能会问到，但是实际项目中应用的还比较少；

浏览器原生支持模块化的缺点

文件目录

image-20210824134633264

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

image-20210824154030585

![Honeycam 2021-08-24 13-43-54](../ad_images/vi_viteLearnNote.assets/Honeycam 2021-08-24 13-43-54.gif)

命令行

npm init

输出结果

image-20210824154441326

image-20210824154610097

命令行:安装lodash-es

npm install lodash-es

输出

image-20210824182306939

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文件,所以会有很多请求,所以请求次数又六百多此,同时请求时间太长,严重消耗了浏览器的性能.

image-20210824183602510

image-20210824183919008

vite的安装

Node版本是大于12版本的,在命令行输入:

npm install vite –g # 全局安装
npm install vite –D # 局部安装

输出

image-20210824184909225

vite的使用

命令行输入

npx vite

输出

image-20210824185508746

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名称之后,这个请求次数变少了,当然请求耗时也是变短了.

image-20210824190023857

引入CSS文件

引入CSS文件:style.css

body {
    background-color: pink;
}

image-20210824191558066

输出

引入less文件

src>css>title.less

@fontSize:100px;
@fontColor:blueviolet;

.title {
    font-size: @fontSize;
    color: @fontColor;
}

输出

image-20210824192346210

输出

没有less处理器

image-20210824192614390

安装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')
    ]
}

输出

可以自动帮我们添加浏览器内核前缀

image-20210824193757964

引入TypeScript

src>ts>mul.ts

export default function(num1:number,num2:number):number{
    return num1*num2
}

src>main.js引入

关键代码

image-20210825070144563

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)

输出

image-20210825070441776

引入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

关键代码

image-20210825072135178

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

关键代码

image-20210825072224847

<!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

成功输出

image-20210825073642558

image-20210825073655719

vite编译快的原因

这里也就解释vite编译快的原因,有个预编译,可以重复使用,知道改变的时候,才会重新编译这个预编译的东西

image-20210825073814491

vite项目的打包

打包项目到dist文件夹

npx vite build

输出

image-20210825080008071

预览打包之后的vite项目

预览打包之后的vite项目

npx vite preview

创建脚本

package.json

关键代码

image-20210825080401566

{
  "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

输出

image-20210825081103269

image-20210825081315968

posted on 2022-07-30 00:07  lazycookie  阅读(550)  评论(0)  编辑  收藏  举报