如何利用vite快速搭建vue3项目

 更新时间:2024年03月21日 16:04:41   作者:菜鸟茜  
这篇文章主要介绍了如何利用vite快速搭建vue3项目问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1.选择一个文件夹

在vscode终端打开,输入命令【npm create vite@latest】

npm create vite@latest

2.提示你输入项目名称之后

我这里设置的是【rookiedemo】

3.回车之后

出现选择框架的提示,我们选择【vue】回车

4.之后根据你的编码习惯或需要

选择【ts】或者【js】,点回车

5.vite非常贴心

按照对应的提示,即可

6.【cd rookiedemo】

进入对应的工程目录

7.【npm install】安装

安装中……

安装完毕……

8.【npm run dev】运行

9.浏览器打开即可看到

整个过程非常简便快捷!

通过以上步骤,我们就得到了一个非常纯净的框架基底

之后我们将一步一步给这个框架基底添加基础的好用的工具,以便快捷开发。

小Tips:

Vite 需要 Node.js 版本 18+,20+。

然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用Vuex状态管理模式

    vue使用Vuex状态管理模式

    这篇文章介绍了vue使用Vuex状态管理模式的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-04-04
  • Vue 实现把表单form数据 转化成json格式的数据

    Vue 实现把表单form数据 转化成json格式的数据

    今天小编就为大家分享一篇Vue 实现把表单form数据 转化成json格式的数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue v-for直接循环数字实例

    vue v-for直接循环数字实例

    今天小编就为大家分享一篇vue v-for直接循环数字实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue表单输入的双向绑定失效原因与解决方案

    Vue表单输入的双向绑定失效原因与解决方案

    在Vue.js开发中,双向绑定是实现表单输入与数据同步的核心特性之一,然而,在实际开发中,开发者可能会遇到双向绑定失效的问题,导致表单输入无法正确更新数据或视图,本文将探讨双向绑定失效的常见原因,并提供相应的解决方案,需要的朋友可以参考下
    2025-03-03
  • 详解vuex中的this.$store.dispatch方法

    详解vuex中的this.$store.dispatch方法

    这篇文章主要介绍了vuex中的this.$store.dispatch方法,必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法,才能在store存储成功,需要的朋友可以参考下
    2022-11-11
  • vue调试工具vue-devtools的安装全过程

    vue调试工具vue-devtools的安装全过程

    这篇文章主要介绍了vue调试工具vue-devtools的安装全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue3 element-plus el-tree自定义图标方式

    vue3 element-plus el-tree自定义图标方式

    这篇文章主要介绍了vue3 element-plus el-tree自定义图标方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 记一次vuex的mapGetters无效原因及解决

    记一次vuex的mapGetters无效原因及解决

    这篇文章主要介绍了vuex的mapGetters无效原因及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • :visible.sync 的作用详解

    :visible.sync 的作用详解

    我们在前端开发中经常看到:visible.sync这种修饰符,很多人不知道这是干什么的,在使用ElementUI的时候,里面有个弹窗el-dialog组件的时候会有用到:visible.sync,今天小编带领大家学习下:visible.sync 的作用,感兴趣的朋友一起看看吧
    2022-11-11
  • 一文详细介绍vue的递归组件(推荐)

    一文详细介绍vue的递归组件(推荐)

    这篇文章主要介绍了vue递归组件的相关资料,递归组件是Vue.js中用于渲染层级结构的强大工具,通过组件调用自身来简化复杂数据的渲染,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-12-12

最新评论