本文已参与「新人创作礼」活动,一起开启掘金创作之路。
什么是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
复制代码
下个步骤,等我今天晚上熬夜写完继续补充
欢迎大家指出文章需要改正之处~
学无止境,合作共赢