超高清截图手把手教你彻底学会Vite

语言: CN / TW / HK

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

什么是Vite?

  • 法语:轻量化,快速
  • 基于VUE3 非 打包开发服务器,请注意,它是个开发服务器哇!!
  • 快速开发,按需编译,不再等待整个应用编译完成
  • 基于原生模块系统ESModule实现

实现原理

  • 使用export import 方式导入导出模块,同时实现按需加载
  • 高度依赖module script 特性

下面开始搞事情吧~~

  • 兼容性注意
  • Vite 需要 Node.js 版本 >= 12.0.0。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。 image.png

新建一个文件夹,执行命令,构建一个 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

下个步骤,等我今天晚上熬夜写完继续补充

欢迎大家指出文章需要改正之处~
学无止境,合作共赢 在这里插入图片描述

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~