本文已参与「新人创作礼」活动，一起开启掘金创作之路。
什么是Vite?
- 法语：轻量化，快速
- 基于VUE3 非 打包开发服务器，请注意，它是个开发服务器哇！！
- 快速开发，按需编译，不再等待整个应用编译完成
- 基于原生模块系统ESModule实现
实现原理
- 使用export import 方式导入导出模块，同时实现按需加载
- 高度依赖module script 特性
下面开始搞事情吧~~
- 兼容性注意
- Vite 需要 Node.js 版本 >= 12.0.0。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
新建一个文件夹，执行命令,构建一个 Vite + Vue 项目
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
复制代码进入项目，执行
cd my-vue-app
npm install
npm run dev
复制代码恭喜哇，项目跑起来啦~
- 复制地址用浏览器访问
打开项目看一下我们的目录
看个厉害的e
是不是很好奇，为什么会可以直接加载.vue文件呢？？？接下来我们就开始探索一下吧
- 新建一个文件夹 vite,然后进去执行下面命令
npm init -y
复制代码- 然后生成了一个package.json文件
- 安装依赖 koa 用来实现node服务器，它帮我们封装了node-http哦
npm install koa
复制代码- 接下来我们看一下，当我们执行 npm run dev 的时候，实际是执行了下面的命令，如果我们想要实现这个命令，我们又该怎么做呢？
新建命令执行入口 vite\bin\www.js
配置package.json
"bin":"./bin/www.js",
复制代码配置执行环境（这个是必须写的哇）
#! /usr/bin/env node
// 这个就是我们的入口文件啦~~
console.log('xiaojin love code!')
复制代码配置环境映射？怎么说，这个就是把这个环境临时搞到全局，让cmd也可以用
npm link
复制代码当然，还有更好玩的东西
- 我把命令改了一下，好玩多了
{
"name": "vite",
"version": "1.0.0",
"description": "",
"main": "index.js",
"bin":{
"xiaojin": "./bin/www.js"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"koa": "^2.13.4"
}
}
复制代码新建一个文件编写服务代码，先跑一把玩一下 vite\src\server.js
const Koa = require('koa')
const { Static } = require('vue')
function createServer() {
let app = new Koa()
// 实现静态服务功能，访问我们的服务器可以返回对应的文件koa-Static
return app
}
createServer().listen(8088,()=>{
console.log('xiaojin server is start at 8088')
})
复制代码使用nodemon来监控代码变化，然后来自动重新执行，我们要执行下面的命令,其实我之前用过另一个叫做 surpervisor,也是可以的
npm i nodemon
复制代码在外层新建一个配置文件，监控这个目录的代码变化 nodemon.json
{
"watch":["vite"],
"exec":"xiaojin"
}
复制代码
记得配置这个
重新执行nodemon命令试一把,记得，是在外层哦
nodemon
复制代码下个步骤，等我今天晚上熬夜写完继续补充
欢迎大家指出文章需要改正之处~
学无止境，合作共赢