- 综合排序
- 最热优先
- 最新优先
- 来自专栏js笔记
vite2
vite.js官网地址 创建项目 切记，目录中不要带有中文，会报错 npm init @vitejs/app //需要输入项目名称 //例如 demo-app demo-app //进入文件夹 cd /demo-app //安装依赖 npm install //启动项目 npm run dev vite配置 插件的方式 使用vue/react vite.config.js export default ": resolve("src/styles"), }, plugins: [vue()] } defineConfig可规范类型 import { defineConfig } from 'vite "抛出的事件"); }, //父组件中 <template> //组件实例 <HelloWorld @myClick="handleMyClick" msg="Hello Vue 3 + <em>Vite</em>
33210编辑于 2022-10-25 - 来自专栏js笔记
vite2 特性2
jsx 没好用 安装插件@vitejs/plugin-vue-jsx npm install @vitejs/plugin-vue-jsx -D 配置在vite.config.js import vueJsx from '@vitejs/plugin-vue-jsx' ... /** * https://vitejs.dev/config/ * @type {import('vite').UserConfig //这里 plugins: [vue(), vueJsx()] }) mock 安装插件 npm install vite-plugin-mock -D npm install mockjs -S 配置 //引入 import vueMockServe from 'vite-plugin-mock' plugin:[vueMockServe({ supportTs: false })] src同级目录创建 console.log(data,33) }) 安装cross-env npm install cross-env -S 修改脚本 "dev": "cross-env NODE_ENV=development vite
48720编辑于 2022-10-25 - 来自专栏腾讯新闻前端团队
wp2vite ~ 让webpack项目支持vite
github: https://github.com/tnfe/wp2vite npm: https://www.npmjs.com/package/wp2vite 如果有人不知道webpack 和vite [image.png] 在前段时间对wp2vite做了一次重构的更新，把之前的分情况处理改为了流式的处理; 第一版的wp2vite是先对项目进行判断，react项目走react的流程，vue的项目走vue 的流程； 第二版的wp2vite是流式，一条线完成，不分项目，这样的好处是逻辑更加清晰、代码复用性更强； wp2vite 第一版时仅对react项目进行了良好的支持，vue项目支持力度非常低；第二版在支持 安装与使用 关于wp2vite的安装，与其他命令行工具安装是一样的： npm install -g wp2vite or yarn global add wp2vite 使用的话，其实是非常简单的，一个特别特别简单的工具 or wp2vite --config=.
1.4K131发布于 2021-08-18 - 来自专栏js笔记
vite2 特性3
安装 vuex4和vue-router4 npm install vuex@next vue-router@next -S vue-router使用 创建文件src/router/index.js import { createRouter, createWebHistory } from 'vue-router' // new 转换成工厂函数 const router = createRouter({ history: createWebHistory(), routes: [
18820编辑于 2022-10-25 - 来自专栏快乐阿超
vue2配置vite
本篇博客针对新vue2项目，老项目就先不说了哈哈(坑太多) 首先新建一个vue2项目 vue create simple-vue2-vite 选择Default ([Vue 2] babel, eslint Successfully created project simple-vue2-vite. Get started with the following commands: $ cd simple-vue2-vite $ yarn serve 安装完毕后我们进入，执行 cd simple-vue2 -vite yarn serve 可以看到正常运行： 我们首先安装vite pnpm i -D vite vite-plugin-vue2 根目录新建一个vite.config.js import { defineConfig } from 'vite' import { createVuePlugin } from 'vite-plugin-vue2' export default defineConfig
1.1K20编辑于 2022-08-21 - 来自专栏Mintimate's Blog
ViteConf 2023结束，现在的Vite发展如何？是时候使用Vite了么？
已经2023年了，Vite现在发展怎么样呢？现在是时候切换到Vite么？ 当然，很多开发者可能对尤雨溪的“The State of Vite”更感兴趣，本次我们就来介绍一下Vite的发展，同时融合看看现在使用Vite怎么样？ VueVue自然不必多说，Vue2时代，使用VueCli(基于Webpack）进行创建脚手架项目，Vue3开始官方推荐使用create-vue：图片图片使用create-vue可以初始化基于Vite的Vue2 在Vue2时期，配合Webpack，我们可以使用VuePress轻松完成一个文档的部署工作，现在VuePress也在适配Vite：https://v2.vuepress.vuejs.org/:图片但是， 当然，也要看场景；一些企业不重视前端，或者只是使用Vue2作为企业内部系统的使用，它们甚至可以使用Vue2 + Element UI或者Webpack4 + Vue2退休；正如现在很多企业还在使用JQ开设新的项目一样
1.9K113编辑于 2023-10-10 - 来自专栏更流畅、简洁的软件开发方式
vite2 + vite.config.js 比较坑的环境变量，vite2模式的使用
但是在 vite.config.js 里面直接写 import.meta.env.DEV 的时候 ，运行时却报错了。 各种查了之后，发现要折腾一下。 VITE_BASEURL=./ VITE_BASEURL=lib VITE_BASEURL=nf-rollup-webstorage 然后把vite.config.js改成这样： import { defineConfig output: { chunkFileNames: 'static/js1/[name]-[hash].js', entryFileNames: 'static/js2/ 我们需要改一下 package.json 的 script "scripts": { "dev": "vite", "build": "vite build --mode project ", "lib": "vite build --mode lib", "serve": "vite preview" } 然后输入对应命令即可。
1.7K30发布于 2021-11-24 Vite3+Pinia2搭建
一、什么是Vite3+Pinia2组合模式vite 是一个现代的前端构建工具和开发服务器，而 pinia 是 Vue.js 的状态管理库，类似于 Vuex 但更轻量且易于使用。 Vite 官方中文文档Vite最新的脚手架Vite 是一个面向现代浏览器和 Node.js 的构建工具，它使用原生 ES 模块导入来提供闪电般的冷启动。 二、搭建第一个 Vite 项目打开命令行工具，创建vite-pinia-study项目npm create vite@latest vite-pinia-study是否要安装create-vite@5.2.3Need 修改端口,vite.config.js在 vite.config.js 中，将端口号定义为数字 8080 而不是字符串 "8080"。 这样可以确保 Vite 服务器使用正确的端口配置。
28120编辑于 2024-08-20- 来自专栏人生代码
Vite2 静态资源处理
document.getElementById('hero-img').src = imgUrl 例如，在开发阶段，imgUrl将是/img.png，而在生产版本中，它将变成/assets/img.2d8efhg.png
2.5K20发布于 2021-03-16 - 来自专栏快乐阿超
vue2使用vite过渡
——佚名 项目介绍 vite-plugin-vue2 是一个 Vite 插件，专门用于在 Vite 项目中支持 Vue 2。 使用 npm 引入 Vite Plugin Vue2： npm install vite-plugin-vue2 vue-template-compiler -D 安装 vite-plugin-vue2 例子 下面是一个简单的 Vue 2 组件示例，展示了如何使用 Vite 和 vite-plugin-vue2 构建一个带有响应式数据的 Vue 2 应用。 应用场景： 现有 Vue 2 项目升级：对于现有的 Vue 2 项目，开发者可以借助 vite-plugin-vue2 将构建工具迁移到 Vite，享受更快的开发体验。 通过使用 vite-plugin-vue2，你可以轻松将现有的 Vue 2 项目迁移到 Vite，并享受现代开发的所有优势。这是一个简单而强大的工具，适用于各种 Vue 2 项目。
81610编辑于 2024-09-19 - 来自专栏thinkphp+vue
用 vite 2 平滑升级 vue 2 + webpack 项目实战
`&${query}` : ''}` ) `````` 复制代码 2. vite build -> build() // packages/vite/src/node/cli.ts -> doBuild jenkins 等部署环节，可能需要关心相关 node 软件包的升级 package.json 依赖 "devDependencies": { "vite": "^2.8.2", "vite-plugin-vue2 基本结构 import {createVuePlugin} from 'vite-plugin-vue2'; export default ({mode}) => { const isProduction base: `/${config.base}/`, logLevel: 'info', // 插件，兼容 rollup plugins: [ // vue2 plugin-legacy 插件为打包后的文件提供传统浏览器兼容性支持 legacy 对 build 速度影响较大，酌情采用 plugins: [ legacy({ targets: ['> 1%', 'last 2
1.9K70编辑于 2022-03-10 - 来自专栏前端开发随笔
vite2+vant+postcss搭建移动端
安装vant和vite按需引入 npm install vant -s npm install vite-plugin-style-import -D vite.config.js import vue from '@vitejs/plugin-vue'; import styleImport from 'vite-plugin-style-import'; export default { plugins Button) app.mount('#app') <van-button type="primary">主要按钮</van-button> 安装px转rem插件 npm install postcss-px2rem-exclude lib-flexible -s 新建postcss.config.js module.exports = { plugins: { "postcss-px2rem-exclude ": { remUnit: 75, remPrecision: 2, exclude: /node_modules|folder_name
1.9K20发布于 2021-05-27 - 来自专栏更流畅、简洁的软件开发方式
初探 vite2 + vue3 vite2 构建项目：安装第三方控件script setup
vite2已经出来一段时间了，这几天没忍住尝试了一下，首先体验到的就是 —— 快，真的很快，再也不用痛苦的等待了。 然后就是踩坑，因为vite2还算是比较新，所以介绍文章不多，虽然已经出来官网文档了，但是现在的官网似乎侧重原理介绍，对于最初级的使用方式，似乎没有，或者是我还没有找到。 这里汇总一些基础用法。 创建项目 vite2 构建项目： 建议使用yarn，可以更快一些。 yarn create @vitejs/app 然后按照提示操作即可！ vite.config.js 内基础配置 增加了一个配置文件，这里面可以进行各种配置，看着有点晕。 如果说 vue3 的composition API 带来的心智难度是1 （约束性变小） 的话，那么这个vite2带来的难度大概是 2 （约束性几乎没了），想要驾驭好更难了一些。
1.9K20发布于 2021-04-13 - 来自专栏dylanliu
密码的发展2
但是以前发展出来的复杂的密码法却没有这个保证，必须要 Alice加密 --- Bob 加密 -- Bob 解密 -- Alice 解密才行。即使是最简单的一般替代法也是不符合要求的。 Y Z 密文2 D F A B C E G .... Y Z 现在要加密a， Alice使用密文1 加密为 B，Bob 使用密文2 将 B 加密为 F，Alice 按照密文1 将 f 解密为 F, Bob 收到后再用密文2 解密为 E，却不是最初的字母 a
66420发布于 2020-04-24 - 来自专栏快乐阿超
vite
分享一个前端开发与构建工具vite，官网： https://vitejs.cn/ 可以以极快的方式冷启动项目，极快的速度热重载HMR(Hot Module Replacement) 使用方式按照官方文档创建项目即可 https://vitejs.cn/guide/#scaffolding-your-first-vite-project
42020编辑于 2022-08-21 - 来自专栏Lan小站
vite2+vue3配置axios跨域
在根目录下有一个vite.config.js import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' // https
44120编辑于 2022-07-13 - 来自专栏前端开发随笔
Vite2+Vue3初始化项目
构建命令 vite中文文档 我这里npm版本是7.x，其它安装可以看这里 npm init @vitejs/app vite-ts-demo -- --template vue npm install npm run dev 打包上线 先在文件夹根目录创建vite.config.js文件 写入 module.exports = { base: './' }; 执行 npm run build
28310编辑于 2022-05-05 - 来自专栏前端数据可视化
Vite 搭建 Vue2 项目（Vue2 + vue-router + vuex）
0、简介 在写本文时，Vite 默认不提供 Vue2 项目的创建方式。 使用 Vite 创建出来的 Vue 项目，暂时都是 Vue3 的。 Vite 是构建工具的高阶封装。 svelte svelte-ts 更详细的介绍请看 Vite官网（中文版） Vite GitHub地址 1、初始化 Vue2 项目 在写本文时，Vite 默认没提供 Vue2 项目创建的选项。 (y) 之后只需输入项目名称即可，我这里新建的项目名为：vite-vue2。 Project name: vite-vue2 完成以上步骤后，再选择以下要新建的是什么项目即可。 项目目录如下所示 1.2、安装 vite 对 vue2 支持的插件 要在 vite 里运行 vue2 项目，需要安装一个 vite 的插件：vite-plugin-vue2 npm install vite-plugin-vue2 引入 vite-plugin-vue2 插件，并用 Vite 提供的插件注册方法来注册。
8.1K62编辑于 2022-04-15 - 来自专栏人力资源数据分析
人才数字发展转型（2）
在进行了数字化学习平台的引入后，接下来的问题就是平台的运营，以及平台如何结合线下的学习助推公司的人才发展和战略支持。首先我们面对的是平台内容的生成问题。 1、 培训课程的录制 我们平时都有很多线下的课程，可以对线下的课程进行现象的视频录制，然后进行编辑剪辑，可以作为线上的课程素材 2、 在线课程的设计 培训人员可以根据课程规划，进行微课的设计，一般微课都是以多媒体的形式呈现
43720发布于 2020-01-02 - 来自专栏全栈开发工程师
【Vite基础】003-Vite 中使用 TypeScript
2、手动校验 # 只校验，不输出编译的文件 tsc --noEmit 二、编译代码验证 直接使用 ts 语法！ "src/**/*.tsx", "src/**/*.vue" ], "exclude": [ "node_modules" ] } 2、 3、作用2：访问枚举 代码 关闭时，正常不报错！ 运行时出错 开启 isolatedModules 后 报错！ declare 参考文章： 1、TS之declare的简单使用 https://blog.csdn.net/youhebuke225/article/details/125664535 2、ts的. 2、演示 第一步：修改 tsconfig.json 添加 “types”: [“vite/client”], { "compilerOptions": { "target"
78920编辑于 2025-01-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号