利用Vite / Vue-Cli快速创建Vue项目

1、vite

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

1.1、利用Vite创建Vue项目的命令

npm： npm create vite@latest
yarn： yarn create vite
pnpm： pnpm create vite
（1）提示需要安装(create-vite@5.2.1)此包，是否继续 ？ 我们填写 y（yes）按 回车键，进入下一步。
（2）输入要创建的项目名称，按 回车键 进入下一步。
（3） 选择你要创建的项目，我们要创建Vue，注意用方向键选择，选到Vue,按 回车键 即可。
（4）选择要使用的变成语言，我这里选择的是Js，注意用方向键选择， 大家看自己用什么选什么。按 回车键 进入下一步。
（5）这步，我们的项目就已经建成功了。接下来我们安装依赖，启动项目.
（6） 安装依赖命令： npm i (npm install)，用编程工具打开项目，在项目终端里安装依赖。
（7）启动项目：使用 npm run dev 命令， 点击Local，看到如下页面就是运行OK啦.

1.2、项目目录结构介绍

vscode 默认生成的，可删可不删。
node_modules 是我们安装依赖的位置，我们按照的依赖可以在这个文件夹中看到！
public 目录用于存放静态文件，例如 index.html 文件和图片等。
src 目录用于存放源代码。
assets 目录用于存放静态资源，例如图片、字体等。
components 目录用于存放组件。
App.vue 文件是应用程序的根组件。
main.js 文件是应用程序的入口文件
index.html 就是整个项目的页面
package.json 是整个项目的说明书，项目安装的依赖，开发依赖等
README.md 说明文件
tsconfig.json typescript配置文件
vite.config.js vite配置文件

2、Vue-Cli

1、Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。

在终端输入npm install -g @vue/cli
利用Vue-Cli 创建Vue项目的命令 vue create 项目名
选择生成Vue项目的版本，注意用方向键选择。前两项都是官方默认封装好的设置，这里选择第三项（自己手动选择功能）之后，按回车键 进入下一步！

3、vite 和 webpack的区别

webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
在HMR方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中不可以使用CommonJS

3.1 webpack

Webpack提供配置项和插件系统，允许我们在webpack.config.js文件中进行各种配置，从而帮助我们定制化构建项目。
mode

设置打包的模式，production为生产模式，development为开发模式

module.exports = {
    mode:'production',
}
entry

指定打包入口文件，默认为./src/index.js

module.exports = {
    entry:'./src/a.js',
}
// 指定打包入口文件为./src/a.js
entry:['./src/a.js','./src/b.js']
// 使用数组可以设置多个入口文件，但是最后始终打包成一个文件
entry:{
    aa:'./src/a.js',
    bb:'./src/b.js'
},
  • 对象形式也可设置多个入口文件，但是会打包成多个文件。Webpack 会将value文件打包成key.js文件，比如上述例子会将'./src/a.js'文件打包成aa.js文件、'./src/b.js'件打包成bb.js文件。
output

对打包后的文件进行配置，默认打包文件地址为./dist/main.js

const path = require('path')

module.exports = {
    output:{
        filename: "bundle.js", //打包后的文件名
        clean: true, //每次打包前清除上次打包的文件
        path: path.resolve(__dirname, 'hello'), //打包后的文件存放路径，必须要绝对路径
    }
}
  • 在filename中Webpack提供模版字符串的形式，可以自动生成唯一文件名：
  • filename: "[name].js" 打包多个文件时匹配对应的文件名,[name]与 entry 中的 key 对应。
  • filename: "[hash].js" 会随机生成哈希值，一般用于区分版本。
loader

Webpack默认情况下，只会处理 js 文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader

以css为例，如果我们不进行任何操作

//直接将css引入到js中
import './style/index.css';

document.body.insertAdjacentHTML('beforeend', '<h1>hello webpack</h1>');
  • 这里需要注意⚠️，如果我们配置多个loader，则用数组存放，存放的顺序遵循从右往左，先执行的放右边，否则会报错。这里先编译css再使用，所以顺序为'style-loader','css-loader'。
配置兼容性

我们可以在package.json文件中配置需要兼容的浏览器，详情见 github

"browserslist": [
  "defaults", //默认
  "ie <= 11", //ie版本低于11
  "last 2 versions", //至少存在两个版本
  "> 1%", //市场占有率大于1%
  "iOS 7",
]

3.2、vite

Webpack 是先打包再运行，而 Vite 开发时并不打包，而是直接采用 ES Module 运行项目，部署的时候再打包，开箱即用。

3.2.1、使用步骤

  1. 初始化项目
yarn init -y
  1. 安装 Vite
yarn add -D vite
  1. Vite的源码目录就是项目根目录，创建index.html文件，以ES Module的方式引入js文件
<script type="module" src="./index.js"></script>
  1. 在本地5173端口启动一个开发服务器，进行项目调试
yarn vite
  1. 打包代码
yarn vite build

3.2.2、配置文件

首先在根目录下创建vite.config.js文件，⚠️注意这里的抛出语法与 Webpack 不同，Webpack使用 CommonJS 语法，而 Vite 使用的是 ES Module 语法。
  • //webpack
module.exports = {
    ...
}
  • //vite
export default = {
    ...
}
  • 这里Vite还提供了一个可选配置项defineConfig
import { defineConfig } from "vite";//需不需要提示

export default defineConfig({
    ...
})

它的作用是在我们写配置的时候会不会有提示。

vite不用配置loader就能编译和使用css。

(1)插件

Vite 可以使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。详情参见 使用插件 | Vite 官方中文文档 (vitejs.cn)
举个例子🌰：
要想为传统浏览器提供支持，类似于Babel，需要引入官方插件@vitejs/plugin-legacy和压缩工具terser。

yarn add -D @vitejs/plugin-legacy terser

然后配置插件：

import { defineConfig } from "vite";//需不需要提示
import legacy from "@vitejs/plugin-legacy";

export default defineConfig({
 plugins:[
 legacy({
 targets:['ie 11'], //兼容IE 11
 })
 ]
})

index.js：这个文件中的箭头函数并没有转为普通函数；
index-legacy.js： 这个文件中的箭头函数成功转成了普通函数；
polyfills-legacy.js： 这个文件的作用是用于向下兼容旧版浏览器，确保旧版浏览器能够读懂新特性。
index.html：
这个文件的意图就很明显了，如果浏览器支持ESModule（即现代浏览器），则一般可以支持新语法，因此就可以直接引入新语法文件；但是如果浏览器不支持ESModule，则可能是旧版本的浏览器，它们可能不支持新特性，这时候就需要引入兼容性代码来填补这些功能的缺失。在这种情况下，一般会引入 polyfills，以及旧版文件，来确保应用在旧版浏览器中的正常运行。
vite不像webpack只生成一个降级之后的文件，而是两个都生成，再根据浏览器的兼容性，动态地确定加载哪个版本的代码。对于现代浏览器来说，直接加载现代版本的代码可以获得更快的加载速度和更好的性能。而对于不支持 ES Module 的旧版浏览器，则加载降级版本的代码以确保兼容性。

以上是对兼容性插件legacy的分析，更多插件可参见 插件 | Vite 官方中文文档 (vitejs.cn)

3.2.3、快捷命令

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
},

3.2.4 对比

构建方式：

  • Webpack 通过构建整个项目的依赖图，将所有资源打包成一个或多个 bundle 文件，每次重启都需要打包。Vite 采用了即时编译的方式，在开发模式下通过浏览器原生支持的 ES Module 特性进行加载，不需要打包。

开发体验：

  • Webpack 需要较多的配置，对复杂的项目来说，需要花费时间和精力来配置各种 loader 和 plugin。Vite 开箱即用，不需要复杂的配置即可快速启动项目，支持各种插件以满足特定需求。

热更新：

  • Webpack 的热更新通常需要借助 webpack-dev-server 等插件，在一些情况下配置起来比较复杂。Vite 内置了基于浏览器原生模块热更新的开发服务器，无需额外配置即可实现快速的热更新。


    image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容