介绍
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一下,导入相应包