vue3.0使用vite新建项目

最新推荐文章于 2024-05-15 17:35:31 发布
最新推荐文章于 2024-05-15 17:35:31 发布
阅读量244 收藏
点赞数
分类专栏： vue2/vue3 文章标签： vue vite
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27702739/article/details/117585068
版权

我的是在win10环境下,主要步骤是

$ npm init @vitejs/app

2.输入项目名称,我i这里使用默认的

 

3.选择框架,我这里是用的vue，大家可以根据自己的情况选择

4.选择是js还是ts的语法

5.最后回车

6.浏览器打开服务，成功的话会显示下面的界面

到此一个vue3+vite的新项目就新建完成了

风清云淡_A
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3.0+Vite开发
04-19
Vue3.0+Vite开发
Vue3.0配置多页面应用
03-17
Vue3.0配置多页面应用源码
使用Vite重构Vue3项目
三拾的博客
02-06 256
截止发文时间，vite正式版已经发布快3年时间了，vue3也发布到3.2版本了，它的周边设施基本上已经齐活了。也是时候再次重构下我那个vue3.0的开源项目了。
这是一份保姆级Vue3+Vite实战教程
很多时候犯错都是在不知情的情况下发生的
02-12 1万+
ESLint 不仅能够检测代码中的错误，而且在许多情况下，可以为我们自动纠正错误。如上，这是我电脑 nrm 管理的镜像源列表，最后一个是我公司内网的所以打码了，除了最后一个都是安装 nrm 自带的，你可以使用 nrm use 命令很方便的去切换源，npm 默认就是列表中名为 npm 的源，如果你下载不下来一些工具，可以切换为 taobao 源，当然安装完成后最好切回来，因为除了 npm 源，其他源在下载某些包时，都可能会出现一些莫名的问题。
Vue3.0 + Vite 搭建 + API详解【持续更新】
最新发布
weixin_44216637的博客
05-15 671
api + 性能提升
vue3和vite
qq_34200636的博客
12-30 1910
新建vue3项目，并使用vite
Vue 3 学习 四、Vite 介绍
皮蛋很白的博客
12-04 3064
概念 Vite 是一个面向现代浏览器的一个更轻、更快的 Web 应用开发工具 它基于 ECMAScript 标准的原生模块系统（ES Modules）实现 目的 它的出现是为了解决 webpack 在开发阶段使用 webpack-dev-server 冷启动时间过长，以及 webpack HMR 热更新反应速度慢的问题。 使用 Vite 创建的项目，就是一个普通的 Vue 3 的应用。项目基于 Vue CLI 创建的项目少了很多的配置文件和依赖。 项目依赖 Vite 目前只支持 Vue 3.0
VUE3+vite
weixin_41184962的博客
03-24 3837
vue3 新特性 + vite 防抖和节流 Vue 没有内置支持防抖和节流，但可以使用Lodash等库来实现。 如果某个组件仅使用一次，可以在methods中直接应用防抖： <script src="https://unpkg.com/lodash@4.17.20/lodash.min.js">&...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
配置一个vue3.0项目的完整步骤
10-17
主要介绍了配置一个vue3.0项目的完整步骤，从0开始配置一个vue项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue 3.0中jsx语法的使用
01-21
Vue 3.0 中尤大使用的了新的编译工具 vite，革了 webpack 的命:face_with_tears_of_joy:。尝试看了下文档，发现支持 jsx 语法，由于这段时间都是在使用 react 来开发项目，jsx 完全不同的体验，更加的纯粹与灵活。 ...
Vue----vite 的基本使用
热门推荐
emmmm.....
04-29 1万+
文章目录2 vite 的基本使用2.1 创建 vite 的项目2.1.1 在对应的文件夹下打开命令窗口2.1.2 运行 npm init vite-app 项目名称2.1.3 运行 cd 项目名称2.1.4 运行 npm install2.1.5 运行2.1.6 打开网站2.2 梳理项目的结构2.3 vite 项目的运行流程2.3.1 在 App.vue 中编写模板结构2.3.2 在 index.html 中预留 el 区域2.3.3 在 main.js 中进行渲染 2 vite 的基本使用 2.1 创建
Vue3+vite环境变量配置
lyna的博客
05-16 2935
定义：变量以 VITE_XXX进行定义。如果想自定义 env 变量的前缀，可以在vite.config.js里配置envPrefix。获取：import.meta.env.VITE_XXX和通常使用import.meta.env.VITE_XXX可以获取到环境变量，而vite.config.js除外。return {envPrefix: ['VITE', 'VUE'], // 环境变量前缀,默认只会暴露VITE开头变量，定义后可暴露VUE开头变量define: {},})
Vue的新型前端构建工具Vite怎么用
倚栏听风
10-27 1136
Vite
Vue3+Vite快速搭建vue项目
无痕坚守本心的博客
12-22 2030
Vue3+Vite快速搭建vue项目webpack的特点Vite较webpack不同与改进之处Vite缺点安装node.js(正文开始，已安装的可以跳过此步骤)npm镜像设置及cnpm安装使用vite快速搭建vue项目 webpack的特点 webpack打包过程 1.识别入口文件 2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖 3.webpack做的就是分析代码。转换代码，编译代码，输出代码 4.最终形成打包后的代码
vue3.0+vite+router搭建项目
前端互助会
02-24 4353
第一步：安装vite （1）、去Node.js 官网安装node 1、安装 Node.js >=12.0.0 二、搭建vite项目 （1）、安装全局vite npm install -g create-vite-app 第二步：创建项目 创建基于vite的vue3项目，执行以下代码： create-vite-appcreate-vite-appvue3-vite-demo 注意：此处可能会出现create-vite-app : 无法加载文件 C:\U...
vue3.0 + vite + ts 完成自动导入 vue API 和 自动导入组件及 element loading 指令无法正常使用解决方法
weixin_43191327的博客
04-06 8667
插件(两个组件, 都是 antfu( vite 核心团队成员 ) 写的) npm i unplugin-auto-import unplugin-vue-components -D 使用, 下面是最简单的使用方法 vue component 文档 auto-import 文档很简单, 还需自行探索, 大佬一贯思想, 他很懒, 不想写文档, 看源码就够了 // https://vitejs.dev/config/ export default defineConfig({ plugins: [ .
如何使用vite创建项目
m0_57236802的博客
12-03 604
使用 Vite 创建一个新的前端项目是一个快速且现代化的方法。Vite 是一个构建工具，它利用原生 ES 模块来提供一个快速的开发服务器。
vite创建vue3项目
qq_60163657的博客
08-12 5137
该文章主要通过 vite + vue3 + vue-router+ Element Plus + axios 搭建项目。
vue3.0+vite中使用defineEmits
06-08
在 Vue 3.0 + Vite 中，您可以使用 `defineEmits` 函数来定义组件的自定义事件。 `defineEmits` 函数接受一个对象作为参数，该对象的属性名表示自定义事件的名称，属性值表示该事件的参数。例如，如果您要定义一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值