vite使用入门

已于 2022-09-09 12:19:40 修改
阅读量343 收藏
点赞数
分类专栏： web开发
于 2022-09-09 12:05:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/firstime_tzjz/article/details/126780320
版权

Vite Vue Element-UI 后台管理系统 搭建教程
关键词由CSDN通过智能技术生成

【vite1.0】

创建项目：

npm init vite-app

【vite2.0】

创建项目：

npm init @vitejs/app

例子：带你使用vite+Vue+Element-UI搭建一套简单的后台管理系统

带你使用vite+Vue+Element-UI搭建一套简单的后台管理系统_最爱王哥的博客-CSDN博客_vite 使用elementui

【vite3.0】

创建项目：

npm init vite
npm create vite
npm create vite@latest

实测以上三者等效

例子：vite+vue3搭建简易后台管理系统

vite+vue3搭建简易后台管理系统（步骤一：安装搭建环境）_窗外鸟不停的博客-CSDN博客

firstime_tzjz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vite入门与了解
丑小鸭变黑天鹅的博客
04-06 2409
Vite入门与了解一、认识vite二、浏览器原生支持模块化三、Vite的安装和使用四、Vite对css的支持五、Vite对TypeScript的支持六、Vite对vue的支持七、Vite打包项目八、ESBuild解析九、Vite脚手架工具 一、认识vite Webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具 比如rollup、parcel、gulp、vite等等 什么是vite呢？ 官方的定位：下一代前端开发与构建工具 如何定义下一代开发和构建工具呢？ 我们知
使用npm init @vitejs/app 搭建vue3期间遇到的问题汇总整理
AngerJava的博客
04-24 4151
最近看到用vite2能大幅缩短打包时间以及项目启动时间，就自己试了一下用vite2搭建项目，下面是我遇到的问题集合 1、若是npm下载某个配置有问题，参照下面配置，可以试试 npm config edit -- 查看npm镜像配置路径，以及其他的配置镜像下载路径 electron_mirror=https://npm.taobao.org/mirrors/electron/ -- electron下载镜像地址 registry=https://registry.npm.taobao.org/
vite使用方法
weixin_47872937的博客
09-19 3008
vite使用方法
(vue3,node最新版本18)npm init vite@latest没有反应的解决方法
最新发布
weixin_45814547的博客
05-27 669
先执行npm config set registry=https://registry.npmmirror.com。下载了最新的nodejs版本，执行npm init vite@latest要么没有反应，要么就是一直报以上错误，目前亲测有效的方法是。然后查看npm config get registry。最后一定要通过管理员身份打开命令行。
npm init vite-app
Oo_Nebula的博客
03-10 1378
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3 1 其实执行 npm init vite-app 时，npm 会补全模块名为 create-vite-app 并执行 npx create-vite-app npm init vite-app hello-vue3 # same as npx create-vite-app hello-vue3 ———————————————— 版权声明：本文为CSDN博主「c小刺猬」的原
npm create vite@latest或者npm init vite@latest命令是什么意思
听海边涛声
05-12 741
npm create vite@latest或者npm init vite@latest命令是什么意思
vite-react:ite Vite从入门到放弃〜
03-28
Vite React Vite从入门到放弃〜尝试通过Vite构建一个类Ant Design Pro的项目，即从零构造一个简单易用的中后台脚手架。基础框架基本搭好了，打算更进一步，正集中精力开发一个类海的阵营应用框架，使得脚手架尽量...
vue3 + vite入门级资料 (基于vue2和前端基础)
12-13
这是一项基于vite框架和vue3的学习项目，主要使用了vue3的组合式API，也就是复合setup函数的写法。其中内容有vue3的生命周期，watch函数，以及vue3的响应式数据reactive和ref的用法。简而言之就是练手，练基本操作。
vitesse-webext::high_voltage: WebExtension Vite 入门模板
08-04
:high_voltage: 即时 HMR - 在开发者上使用Vite （不再刷新！） :kiwi_fruit: Vue 3 - Composition API、 等等！ :speech_balloon: 轻松通信 - 由和存储提供支持 :leaf_fluttering_in_wind: - 按需 CSS 实用程序...
ef-starter-vite:入门模板可将ef.js与Vite.js结合使用
05-05
这是{{name}}的入门模板，使用捆绑在一起。 用法 使用create-ef-app npm init ef-app < project> -- --template vite 手动地 下载这个专案 解压缩 更改您想要的package.json字段 开始编码！ CodeSandbox 初始化后...
维生素：有目的的Vite入门模板
02-23
有意见的Vite入门模板。 特征 具有 和。 ，和暗模式进行了。 使用 ， 和的你的IDE和您提交前和。 。 用编写e2e测试。 通过预配置的部署到 。 入门 将此存储库用作或使用克隆到具有空git历史记录的计算机： npx...
npm init和npm create、npm create vite什么意思
这是我的笔记本，记录学习历程，分享学习经验，菜鸡一枚，感谢支持！
05-24 3316
截止到目前2023/05/24，已经在npm包官网上找不到这个包了，已经被弃用了，推荐使用。但是，今天在看vite的官方文档时，vite上说创建一个vite项目的命令是。create-vite`这个命令，我们知道就好了，具体执行了什么无需深知。看npm init的官方帮助文档，在命令行中通过以下命令查看官方帮助文档。之前学习的使用知道，还可以利用以下命令来创建Vite项目。然后就去看vite的教程视频，都没有提这个。是vite专属的一个命令吗？之前在用npm时，一直都是。命令 ，我丢，甚是纳闷！
Vite创建项目流程
T8682828的博客
09-30 494
Vite创建项目流程
npm create vite@latest 与 npm init vue@latest之间的区别
2301_76979068的博客
07-22 6851
如果你需要构建一个 Vue 项目，并且需要使用 Vue 生命周期、Vue Router、Vuex 等 Vue 生态的全套功能，以及一些预定义的配置和插件，可以选择使用 npm init vue@latest。 如果你希望创建的项目是一个现代化的、轻量级的项目，不依赖传统的打包工具如 webpack，而且希望享受到 Vite 的极速开发体验，可以选择使用 npm create vite@latest。
vite 创建项目流程 + vue3学习
weixin_45835723的博客
04-24 991
main.js中引入router createvue后面加上use(router)新建router文件 创建index.js。创建views文件夹存放页面。npm i 初始化项目。创建路由中的vue页面。
vue初学：安装使用（2）——使用Vite快速构建Vue项目
m0_46610349的博客
09-01 693
vue初学：安装使用（2）——使用Vite快速构建Vue项目
“npm create vite“ 是如何实现初始化 Vite 项目？
Cyj1414589221的博客
12-05 7244
我们使用 npm create vite 命令来快速初始化一个 Vite 项目；这是如何实现的呢？本文将从头分析 create-vite 创建一个 Vite 项目流程的原理。
npm 搭建 Vite 项目
weixin_60084748的博客
08-04 5084
使用npm 安装Viter
vite 中使用 html-minifier-terser
07-28
在Vite中使用html-minifier-terser插件可以对HTML进行压缩和优化。你可以在Vite的配置文件中添加以下代码来使用该插件： ```javascript const htmlMinifierPlugin = require('html-minifier-terser'); module.exports = { // 其他配置项... plugins: \[ htmlMinifierPlugin({ // 配置项... }) \] } ``` 你可以根据需要配置html-minifier-terser插件的选项来进行定制化的压缩和优化。例如，你可以设置`collapseWhitespace`选项来移除HTML中的空白字符，或者设置`removeComments`选项来移除注释等。具体的配置项可以参考html-minifier-terser的文档。 引用\[1\]中的代码是使用SpeedMeasurePlugin来测量打包时间的插件，并使用smp.wrap方法包裹了导出的webpack配置。这样可以在控制台中看到每个插件的执行时间，以便进行性能优化。 引用\[2\]中的代码是使用PurgeCssPlugin来移除未使用的CSS样式的插件，并通过safelist属性来保留指定的HTML标签的样式。 引用\[3\]中提到了一些在代码中可能存在的问题，例如使用了ES6的语法、模块化语法和CommonJS的模块化语法，以及在通过script标签引入时需要添加type="module"属性。这些问题可能会导致在低版本浏览器上出现兼容性问题。 #### 引用[.reference_title] - *1* *2* *3* [Webpack从入门到进阶（三）---附沿路学习案例代码](https://blog.csdn.net/wuyxinu/article/details/123221905)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值