Vue-Cli脚手架和Vite

最新推荐文章于 2024-04-30 23:43:24 发布

StupidFrontEnd

最新推荐文章于 2024-04-30 23:43:24 发布

阅读量606

点赞数 1

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_58118986/article/details/133752587

版权

介绍

vue-cli(俗称：vue 脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。

特点：① 开箱即用，② 基于 webpack，③ 功能丰富且易于扩展，④ 支持创建 vue2 和 vue3 的项目

如果每个项目都使用webpack一个个去配置，就太过于麻烦了，因此vue-cli出现了

vue-cli安装

一般都是进行全局的安装，打开cmd安装

npm install @vue/cli -g

创建项目

vue create + 项目名称

vue create vue_cli_demo

也有另外一种创建方式

#基于【可视化面板】创建vue项目
vue ui

项目配置的选择

空格键选择，回车下一步

分别代表：

默认（vue3+babel+eslint)

默认（vue2+babel+eslint）

手动配置

这里我们就选择手动配置来实践一编

一般都推荐把配置信息放入独立文件中

完成

项目目录结构

项目运行：npm run serve

项目打包：npm run build

Vite

相关文件

math.js

export {
    a
}
const a="math"

main.js


import {a} from "./js/math.js"
console.log("这里是mainjs")
console.log(a)

通过live-server解决跨域，运行index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./src/main.js" type="module">

    </script>
</body>
</html>

正常这样写，一些浏览器是可以识别的，需要注意：html引入时要加上type="module",引入js文件时要加上.js后缀

但是当遇到vue文件或者ts文件时，依旧不行

Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验

它主要由两部分组成

一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）

一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源

Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持

安装vite

npm install vite -D

通过vite来启动项目

npx vite

Vite对css的支持

vite可以直接支持css的处理

直接导入css即可

vite可以直接支持css预处理器，比如less

直接导入less

之后安装less编译器

npm install less -D

vite直接支持postcss的转换

只需要安装postcss，并且配置 postcss.config.js 的配置文件即可

npm install postcss postcss-preset-env -D

Vite对TypeScript的支持

vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译

只需要直接导入即可

如果我们查看浏览器中的请求，会发现请求的依然是ts的代码

这是因为vite中的服务器Connect会对我们的请求进行转发

获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析

Vite对vue的支持

vite对vue提供第一优先级支持

Vue 3 单文件组件支持：@vitejs/plugin-vue

Vue 3 JSX 支持：@vitejs/plugin-vue-jsx

Vue 2 支持：underfin/vite-plugin-vue2

安装支持vue的插件

npm install @vitejs/plugin-vue -D

在vite.config.js中配置插件

同时也需要安装这个插件对vue文件加载

npm install @vue/compliler-sfc -D

Vite打包项目

我们可以直接通过vite build来完成对当前项目的打包工具

npx vite build

我们可以通过preview的方式，开启一个本地服务来预览打包后的效果

npx vite preview

package.json中配置

这样之后可以直接使用

npm run serve 运行

npm run build 打包

npm run preview 预览

vite脚手架

在开发中，我们不可能所有的项目都使用vite从零去搭建，比如一个react项目、Vue项目

这个时候vite还给我们提供了对应的脚手架工具

所以Vite实际上是有两个工具的

vite：相当于是一个构件工具，类似于webpack、rollup

@vitejs/create-app：类似vue-cli、create-react-app

打开cmd

npm create vite@latest

然后跟随指引可以做到相当快的创建一个文件

在npm install一下，导入相应包

StupidFrontEnd

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Vue-Cli脚手架和Vite

vue-cli(俗称：vue脚手架)是 vue 官方提供的、快速生成 vue 工程化项目的工具。特点：① 开箱即用，② 基于webpack，③ 功能丰富且易于扩展，④ 支持创建 vue2 和 vue3 的项目如果每个项目都使用webpack一个个去配置，就太过于麻烦了，因此vue-cli出现了。
复制链接

扫一扫