精华内容
下载资源
问答
  • vite

    2020-12-29 12:04:22
    vite概念 vite是一个面向现代浏览器的一个更轻、更快的Web应用开发工具 它基于ECMAScript标准原生模块系统(ES Modules)实现 vite项目依赖 vite @vue/compiler-sfc 基础使用 vite serve ...

    vite概念

    • vite是一个面向现代浏览器的一个更轻、更快的Web应用开发工具

    • 它基于ECMAScript标准原生模块系统(ES Modules)实现

    vite项目依赖

    • vite

    • @vue/compiler-sfc

    基础使用

    • vite serve

      • 是一个用于启动web开发的服务器,启动服务器的时候不需要编译所有的代码文件,启动非常快

    • Vite build

      • Rollup

      • Dynamic import

        • Polyfill

    vite核心功能

    • 静态Web服务器

    • 编译单文件组件

      • 拦截浏览器不识别的模块,并处理

    • HMR

      • vite HMR

        • 立即编译当前所修改的文件

      • Webpack HMR

        • 会自动以这个文件为入口重写build一次,所有的涉及到的依赖也都会被加载一遍

    vite特性

    • 快速冷启动

    • 模块热更新

    • 按需编译

    • 开箱即用

      • TypeScript-内置支持

      • less/sass/stylus/postcss-内置支持(需要单独安装)

      • jsx

      • Web Assembly

    代码案例

    #!/usr/bin/env node
    const path=require('path')
    const { Readable } =require('stream')
    const Koa = require('koa')
    const send = require('koa-send')
    const compilerSFC=require('@vue/compiler-sfc')
    const { COPYFILE_EXCL } = require('constants')
    
    const app = new Koa()
    
    const streamToString = stream => new Promise((resolve, reject) => {
        const chunks = []
        stream.on('data', chunk => chunks.push(chunk))
        stream.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
        stream.on('error', reject)
    })
    
    const stringToStream =text =>{
        const stream =new Readable()
        stream.push(text)
        stream.push(null)
        return stream
    }
    // 3.加载第三方模块
    app.use(async (ctx, next) => {
        //ctx.path ->/@modules/vue
        if (ctx.path.startsWith('/@modules/')) {
            const moduleName = ctx.path.substr(10)
            const pkgPath=path.join(process.cwd(),'node_modules',moduleName,'package.json')
            const pkg=require(pkgPath)
            ctx.path=path.join('/node_modules',moduleName,pkg.module)
        }
       await next()
    })
    
    // 1.开启静态文件服务器
    app.use(async (ctx, next) => {
        await send(ctx, ctx.path, { root: process.cwd(), index: 'index.html' })
        await next()
    })
    // 4.处理单文件组件
    app.use(async (ctx,next)=>{
         if(ctx.path.endsWith('.vue')){
           const contents = await streamToString(ctx.body)
           const { descriptor} = compilerSFC.parse(contents)
           let code 
           // 第一次请求
           if(!ctx.query.type){
               code=descriptor.script.content
            //    console.log(code)
            code = code.replace(/export\s+default\s+/g, 'const __script = ')
            code += `
            import { render as __render } from "${ctx.path}?type=template"
            __script.render = __render
            export default __script
            `
           }
           else if(ctx.query.type==='template'){
            const templateRender =  compilerSFC.compileTemplate({ source:descriptor.template.content })
            code =templateRender.code
          }
           ctx.type='application/javascript'
           ctx.body = stringToStream(code)
         }
    
    
        await next()
    
    })
    // 2.修改第三方模块的路径
    app.use(async (ctx, next) => {
        if (ctx.type === 'application/javascript') {
            const contents = await streamToString(ctx.body)
            //  import vue from 'vue'
            // import App from './App.vue'  
            ctx.body = contents
            .replace(/(from\s+['"])(?![\.\/])/g, '$1/@modules/')
            .replace(/process\.env\.NODE_ENV/g, '"development"')
        }
    })
    app.listen(3000)
    console.log('Server running @http://localhost:3000')
    

     

    展开全文
  • vite-sample:vite示例项目
  • viteVite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production. Lightning-fast cold server start ...
  • Vite桌面钱包支持Mac和Windows。 。 发展 初始化子模块 该项目需要使用 。 您首先需要init子模块。 git submodule init git submodule update 安装 安装依赖项 yarn 安装vite-web-wallet的依赖项 cd ../vite-web-...
  • sdui-vite:SDUI-Vite
  • vite-vue3:Vite3快速入门样板,带有vite脚手架,常见的ESLint插件
  • VueJS 3具有: Vite2 TS(x) 埃斯林特
  • vite-plugin-windicss Vite的aka按需TailwindCSS 特征 :high_voltage: 快速-比Vite上的Tailwind快15〜20倍 :puzzle_piece: 按需CSS实用程序(与Tailwind CSS v2兼容) :package: 按需本地元素样式重置 :fire: ...
  • Laravel Vite composer require innocenzi/laravel-vite 该项目旨在尽可能无缝地将与Laravel框架集成。 · 由用:red_heart:︎建造
  • vite-plugin-md 降价促销 将Markdown用作Vue组件 在Markdown中使用Vue组件 :information: Vite 2为0.2.x,Vite 1为0.1.x 安装 安装 npm i vite-plugin-md -D # yarn add vite-plugin-md -D 将其添加到vite.config...
  • wp2vite不会删除您的webpack配置,但会将vite配置注入到您的项目中以支持vite。 开发速度比webpack快80%,构建速度比webpack快50%。 React 无论是否执行弹出,都支持由react项目 支持创建的react项目 支持创建的...
  • vite-mdx:在Vite中使用mdx的示例
  • :information_selector: v0.3.x支持Vite 2, v0.3.x支持Vite 1。 npm i vite-plugin-pwa -D # yarn add vite-plugin-pwa -D 将其添加到vite.config.js // vite.config.js import { VitePWA } from 'vite-plugin-...
  • Vite安装

    2020-12-14 20:37:22
    Vite 特性 按需编译,不会刷新全部DOM 开发中热更新 冷服务启动。不打包,使用 ES6 import。 使用npm新建项目: npm init vite-app demo # 进入demo文件夹 npm install npm run dev 使用yarn新建项目:yarn ...

    Vite 特性

    1. 使用 rollup
    2. 按需编译,不会刷新全部DOM
    3. 开发中热更新
    4. 冷服务启动。不打包,使用 ES6 import。

    使用npm新建项目:

    npm init vite-app demo
    # 或
    yarn create vite-app demo
    
    # 进入demo文件夹
    npm install
    # 或
    yarn 
    
    npm run dev
    # 或
    yarn dev
    

    安装yarn:npm install -g yarn


    目录结构

    |-node_modules        -- 项目依赖包的目录
    |-public              -- 项目公用文件
      |--favicon.ico      -- 网站地址栏前面的小图标
    |-src                 -- 源文件目录,程序员主要工作的地方
      |-assets            -- 静态文件目录,图片图标,比如网站logo
      |-components        -- Vue3.x的自定义组件目录
      |--App.vue          -- 项目的根组件,单页应用都需要的
      |--index.css        -- 一般项目的通用CSS样式写在这里,main.js引入
      |--main.js          -- 项目入口文件,SPA单页应用都需要入口文件
    |--.gitignore         -- git的管理配置文件,设置那些目录或文件不管理
    |-- index.html        -- 项目的默认首页,Vue的组件需要挂载到这个文件上
    |-- package-lock.json --项目包的锁定文件,用于防止包版本不一样导致的错误
    |-- package.json      -- 项目配置文件,包管理、项目名称、版本和命令
    
    展开全文
  • vite-ppt:基本的vite + vue3共享ppt
  • vite-plugin-handlebars Vite对车把的支持 为什么? 我非常喜欢Vite,它是一个简单的静态站点捆绑程序。它可以处理捆绑多个HTML文件的操作,这虽然很棒,但是却缺乏现成的共享这些HTML文件部分的能力。 虽然可以...
  • Vite的设计目标是为工业dApp提供可靠的公共平台,并具有超高吞吐量和可扩展性的功能。 去Vite Vite协议的官方golang实现 可以从下载go-vite二进制文件。 指南与文件 产品 通过移动浏览器打开 链接与资源 安装 您...
  • 初探Vite

    千次阅读 2021-02-20 15:41:15
    最近Vite可能算是比较火的一个话题,尤其是随着2.0版本的正式发布之后,各个公众号都在头部推荐,似乎是可以给前端童鞋开发效率带来巨大变革的样子,因此今天抽时间撸一遍看看,毕竟还是要紧跟时代潮流的。...

    Vite

    Next Generation Frontend Tooling

    概述

    最近Vite可能算是比较火的一个话题,尤其是随着2.0版本的正式发布之后,各个公众号都在头部推荐,似乎是可以给前端童鞋开发效率带来巨大变革的样子,因此今天抽时间撸一遍看看,毕竟还是要紧跟时代潮流的。

    Why Vite

    官方文档开头第一部分就是介绍为什么要有Vite这个工具,其实这也是大家关心的点,前端构建编译工具经过几年的发展从最开始的gulp、grunt一直到现在的webpack,看起来现在已经是webpack一家独大的局面了,为什么这个时候会重新开发一个新的工具呢,问题的答案当然就是旧有的工具存在这样或那样的问题才需要新工具的接入,那我们来看下webpack的问题都有哪些:

    • 开发服务启动速度太慢
    • 热更反应太慢

    而Vite针对这两个问题又是如何处理的呢?

    • Vite将应用里的模块分为两类:dependencies(源码的依赖) 和 source code(源码)

      • dependencies在开发过程中不会被经常改变,动则成千上万行的代码库每次运行也较为耗时
      • source code则需要经常被改动,并且也不是纯js格式
      • Vite并不会对文件进行打包,只是启动静态服务器,之后通过客户端的请求来进行按需加载
        webpack bundle:
        webpack build
        Vite bundle:
        Vite bundle:
    • Vite通过native ESM来对热更新进行提速。只更新被修改文件来进行热更
      大概就是这样,看起来是在开发环境的时候有飞一般的体验,生产环境下应该还是会build生成bundle,接下来来看下如何使用吧。

    如何使用

    浏览器支持:

    • 开发环境:浏览器需支持import语法
    • 生产环境:支持<script type=“module”>标签,不支持的话可以加上官方插件@vitejs/plugin-legacy试下

    Node版本支持:

    Vite requires Node.js version >=12.0.0.
    

    With NPM:

    npm init @vitejs/app
    

    With Yarn:

    yarn create @vitejs/app
    

    接着可以使用vite命令生成一个Vite+Vue的项目

    # npm 6.x
    npm init @vitejs/app my-vue-app --template vue
    
    # npm 7+, extra double-dash is needed:
    npm init @vitejs/app my-vue-app -- --template vue
    
    # yarn
    yarn create @vitejs/app my-vue-app --template vue
    

    Supported template presets include:

    • vanilla
    • vue
    • vue-ts
    • react
    • react-ts
    • preact
    • preact-ts
    • lit-element
    • lit-element-ts

    安装成功之后,打开package.json文件:
    package.json
    可以看到有三个可执行的命令,首先还是应该

    npm i
    // mac 下安装有问题的话 可以试下 sudo npm i --unsafe-perm=true
    

    来讲依赖都安装好

    npm run dev
    

    来体验下所谓飞一般的速度
    在这里插入图片描述
    在这里插入图片描述

    从请求文件来看用的应该就是native ESM

    在这里插入图片描述

    总结

    从上面分析来看,开发环境运行速度快是毋庸置疑的,主要是利用浏览器来帮助做了很多工作。本文只是简单过了下Vite的流程,更多深入的功能还需要继续探索。

    展开全文
  • Vite React Vite从入门到放弃〜 尝试通过Vite构建一个类Ant Design Pro的项目,即从零构造一个简单易用的中后台脚手架。 基础框架基本搭好了,打算更进一步,正集中精力开发一个类海的阵营应用框架,使得脚手架尽量...
  • Vite-Cuubeui-POC 介绍 基于带有Vite 2的CubeUI(Vue 2)的cubeui-app演示。感谢 。 该演示适用于Vite 2.x及更高版本。 位于vite1分支中。 来自基于Webpack 3的移植。 CubeUI包含基于Vue 2的Mobile Web UI组件。 ...
  • Vite 入门

    2021-02-04 09:54:18
    注意:Vite的生产环境下打包是通过Rollup来完成的 Rollup是JavaScript的模块bundler(打包器),可以将一小段代码编译为更大或更复杂的内容,例如库或应用程序。 也就是说Vite提供的是开发环境中的编译,打包工作是...

    一,简介

    项目构建打包工具
    一个由 vue 作者尤雨溪开发的 web 开发工具

    注意:Vite的生产环境下打包是通过Rollup来完成的

    Rollup是JavaScript的模块bundler(打包器),可以将一小段代码编译为更大或更复杂的内容,例如库或应用程序。

    也就是说Vite提供的是开发环境中的编译,打包工作是依靠的Rollup。

    在使用Vite前,你需要知道一点,目前它只支持Vue3.x的版本。

    二,使用

    1,npm方式

    npm init vite-app <project-name>
    cd <project-name>
    npm install
    npm run dev
    

    如果一切正常,在命令行中,你可以看到如下结果:

    vite v1.0.0-rc.9
    [vite] Optimizable dependencies detected:
    vue
    
      Dev server running at:
      > Network:  http://192.168.0.118:3000/
      > Local:    http://localhost:3000/
    

    2,yarn方式

    yarn create vite-app <project-name>
    cd <project-name>
    yarn
    yarn dev
    
    展开全文
  • Vite原理

    2021-03-26 07:58:56
    Vite 注意解决webpack开发时候慢的问题。 原理 只有使用了才去请求文件或模块 vuecli的原理 不管模块是否被使用都被打包到bundle里 vite的HMR build 延伸问题 现在应用是否需要打包? 问题1 现在浏览器都支持...
  • vue-vite-admin vue3-vite2-admin
  • vite原始码阅读 1,基本流程 2,HMR
  • vite-plugin-resolve-externals vite插件解析外部 用法 安装 npm i -D vite-plugin-resolve-externals 通过参数传输使用支持设置,还支持在解析中配置外部项目 // vite.config.js const resolveExternalsPlugin = ...
  • vite-plugin-vue2 用法 运行yarn add vite-plugin-vue2 --dev 将插件添加到vite.config.js // vite.config.js const { createVuePlugin } = require ( 'vite-plugin-vue2' ) module . exports = { plugins : [ ...
  • @ preact / preset-vite 一个多合一的预设,用于使用捆绑程序编写Preact应用。 特征: 通过设置设置热模块更换 在开发过程中启用桥 安装 首先从npm安装预设软件包: npm install --save-dev @preact/preset-vite...
  • vite-vue-app vite-vue-app 哈士奇防止不规范代码被commit,push,merge等 git commit的时候,会先执行precommit的脚

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,782
精华内容 1,112
热门标签
关键字:

Vite