其他分享
首页 > 其他分享> > 超高清截图手把手教你彻底学会Vite

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

作者：互联网

什么是Vite?

实现原理

下面开始搞事情吧~~

新建一个文件夹，执行命令,构建一个 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文件呢？？？接下来我们就开始探索一下吧

npm init -y

npm install koa

新建命令执行入口 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

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

来啦~~

接下来我们来实现，通过服务访问静态资源

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    测试代码哦~
    测试一下我们的静态资源读取情况~
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>


PS C:\jin_files\code\testDemo\vite-demo\my-vue-app> cd vite
PS C:\jin_files\code\testDemo\vite-demo\my-vue-app\vite> npm install koa-static


const static = require('koa-static')

function staticPlugin({app,root}) {
  app.use(static(root)) // 这个root指的是根目录哦~~当我访问我的服务localhost:8088的时候，它会去找根目录下面的index.html
}
module.exports = staticPlugin

const Koa = require('koa')
const staticPlugin = require('./serverPluginServerStatic')
function createServer() {
    let app = new Koa()
    // 实现静态服务功能，访问我们的服务器可以返回对应的文件koa-Static
    const context = { // 创建一个上下文，给不同插件共享功能
        app,
        root:process.cwd() // 这个目录就在vite-vue
    }
    const resolvePlugin = [staticPlugin]
    resolvePlugin.forEach(plugin => plugin(context))
    return app
}
createServer().listen(8088,()=>{
    console.log('xiaojin server is start at 8088')
    console.log('修改代码跑一把')
})

配置一下，访问public目录试一把

I am xiaojin ,I love code~


const static = require('koa-static')
const path = require('path')
function staticPlugin({app,root}) {
  app.use(static(root)) // 这个root指的是根目录哦~~当我访问我的服务localhost:8088的时候，它会去找根目录下面的index.html
  app.use(static(path.resolve(root,'public')))
}
module.exports = staticPlugin

打开F12看一下

怎么才能正常显示我们的资源不报错呢？？？就是说，如何让这句话 import { createApp } from 'vue' 正常执行？

冷静分析

添加模块重写代码逻辑，重写我们的请求路径哇~~


function reWritePlugin({app,root}) {
app.use(async (ctx, next) =>{
    // todu:
    await next() // 先走静态服务，因为默认会先执行 静态服务中间件，将结果放到ctx.body
    // 需要将流转换为字符串，而且我们只需要处理其中JS的引用问题
    console.log('reWritePlugin:')
    if(ctx.body && ctx.response.is('js')){
        console.log(ctx.body)
        console.log('ctx.body已打印完毕')
    }

})
}
module.exports = reWritePlugin

const reWritePlugin = require('./serverPluginModuleRewrite')
function createServer() {
    ...
    const resolvePlugin = [
        reWritePlugin, // 重写请求路径插件 ,为什么这么写这个顺序呢，原因解释放到插件里吧~~
        staticPlugin, // 静态服务插件
    ]
    ...
}

好了，我要睡觉了，明天继续写

睡觉中......

标签：npm,截图,vue,const,手把手,app,js,Vite,vite
来源： https://www.cnblogs.com/sugartang/p/16361768.html