如何创建vue3项目

news2025/2/27 23:04:01

目录

如何创建vue3项目

1、用vue cli创建

2、使用vite直接创建

3、使用vue3官方推荐创建方式


如何创建vue3项目

创建vue3我们常用的有三种方式:

1、用vue cli创建

1.使用vue cli环境前提条件:
node -v
	v16.13.0
npm -v
	8.1.0
vue -V
	@vue/cli 4.5.15 
2.创建项目格式:
   vue create 项目名

vue cli底层用webpack搭建的,此种方式创建vue3适合新手过渡用  

2、使用vite直接创建-------最快速创建

vite是下一代前端开发与构建工具。Vite意在提供开箱即用的配置,同时它的插件API和JavaScript API 带来了高度的可扩展性,并有完整的类型支持。

npm init vite 回车

 npm init vite
Need to install the following packages:
  create-vite
Ok to proceed? (y) y
✔ Project name: … vue3_vite  //项目名称
✔ Select a framework: › vue  //选择vue
✔ Select a variant: › vue 


 cd vue3_vite  //进入目录
  npm install  //安装依赖
  npm run dev  //运行项目

3、使用vue3官方推荐创建方式

vue3: 6大金刚

  •  安装命令:
    npm init vue@3
  • 步骤:
    Need to install the following packages:
      create-vue@3
    Ok to proceed? (y) y----------选Y
    
    Vue.js - The Progressive JavaScript Framework
    
    ✔ Project name: … vue3_ok  //项目名称
    ✔ Add TypeScript? … No / Yes  //是否使用TS
    ✔ Add JSX Support? … No / Yes  //是否支持JSX,除非你是搞React开发
    ✔ Add Vue Router for Single Page Application development? … No / Yes   //是否添加路由
    ✔ Add Pinia for state management? … No / Yes   //是否添加状态管理 推荐pinia
    ✔ Add Vitest for Unit Testing? … No / Yes  //是否添加单元测试
    ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes  //是否添加端到端测试
    ✔ Add ESLint for code quality? … No / Yes   //是否添加ESLint做代码质量检查
    ✔ Add Prettier for code formatting? … No / Yes   //是否添加Perttier进行代码格式化
    
    
    
    
    
      cd vue3_ok   //cd 进行目录
      npm install   //安装相关依赖   npm i
      npm run lint   //运行代码修复
      npm run dev   //运行项目

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405125.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序中使用vant组件库(超详细)

目录前言Vant Weapp的安装与使用1、安装 node.js2、通过 npm 安装3、修改 app.json4、修改 project.config.json5、构建 npm 包6、使用组件全局引入和局部引入全局引入局部引入Toast 组件的使用官方文档 API 详解Props 参数Events 事件Slot 插槽外部样式类前言 Vant是一个轻量…

vue中this.$router.push()路由传值和获取的两种常见方法

今天接到了比较大的需求,由于这个公司的接口调用方法和上一段实习那家公司的写法很不一样,我花了很多时间在摸索,“踏出第一步总是最困难的”,果然没错,第一个很费劲,但完成之后有了思路,下面的…

登录功能的实现(包括前后端)

目录:🍉🍉🍉UPDATE:✨✨✨前言✨✨✨概述✨✨✨技术栈✨✨✨效果图✨✨✨代码✨✨✨github链接🍉🍉🍉UPDATE: 突然发现喜提榜一,蟹蟹读者老爷们的支持(づ ̄ 3 ̄)づ 润色了…

微信小程序完整项目实战(前端+后端)

基于微信小程序的在线商城点单系统 前言:闲来无事,想以后自己开一个小超市或者小吃店,能够支持线上下单,既方便客户也方便自己。系统采用C#语言作为后端实现与小程序的交互,给用来学习或者想自己开个小店的朋友当个参考…

如何在 WordPress 中嵌入 iFrame

💂 个人网站:【海拥】【摸鱼游戏】【神级源码资源网站】🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且…

【uniapp小程序开发】—— 组件封装之【自定义轮播图】

文章目录🍋前言:🍍正文1、首先了解swiper组件1.1、小小的demo示例:1.2、自定义轮播图效果展示说明2、完成自定义轮播图效果3、组件封装——自定义轮播图3.1、创建swiper-doc.vue组件3.2、组件调用,封装完成&#x1f38…

session、cookie、token的区别?

前言 今天就来理一理session、cookie、token这三者之间的关系! 1.为什么会有它们? 我们都知道 HTTP 协议是无状态的,所谓的无状态就是客户端每次想要与服务端通信,都必须重新与服务端链接,意味着请求一次客户端和服…

React组件通信-父子组件间的通信

文章目录React父子组件通信认识组件嵌套组件通信父传子参数验证子传父React父子组件通信 认识组件嵌套 组件之间存在嵌套关系: 在之前的案例中,我们只是创建了一个组件App; 如果我们一个应用程序将所有的逻辑都放在一个组件中,那…

适合我的前端学习路线(学习前端不迷路)

适合我的前端学习路线(学习前端不迷路) 小伙伴们想学习前端,但是却不知如何入手,上网查前端学习路线,第一页往往充斥着各种培训公司的广告,又或者是搜前端学习路线图时,出现大量的路线图导致你还…

【学Vue就跟玩一样】Vue中的路由与多种守卫

1.vue-routervue的一个插件库,专门用来实现对SPA应用的单页Web应用(single page web application, SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新。数据需要通过ajax请求获取。2.什么是路由一个路由就是一组…

Tomcat服务器部署+Web项目搭建

Tomcat服务器部署+Web项目搭建 1.Tomcat服务器 1 . Tomcat下载 2 . Tomcat启动与关闭 3 . 配置端口号2.IDEA搭建Web项目 1 . web项目创建 2 . 本地服务器配置 Tomcat下载 tomcat官网:tomcat 1.选择与自己电脑对应的位数下载,我们…

HTML跳动爱心代码|最近很火的爱心代码你还没收到吗

最近很火的跳动爱心代码HTML实现可DIY 看效果 QQ录屏20221108115545点个赞吧,养成好习惯 不想动手的小伙伴可以直接👇👇 阿里云盘直接提取 阿里云盘 DIY版----提取码: f30q 使用说明 主体代码来源于网络,让我们为原作者点赞👍我用css3的anim…

云服务器部署 Web 项目

一: 搭建 Java 部署环境1: 安装 JDK2: 安装 Tomcat总结3: 安装 MySQL(1): 依次安装(2): 更改配置(3): 启动(4): 测试连接二: 部署 web 项目1: 给服务器准备好依赖的数据2: 微调我们的 Java 代码3: 重新打包4: 上传到服务器上5: 验证一: 搭建 Java 部署环境 之前说过 yum这个命…

手把手教你安装VSCode(附带图解步骤)

一、前端工具vscode 1.1、概述 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互 [1] 。它从网页制作演变而来,名称上有…

Node安装及配置

目录一、Node安装二、Node环境配置2.1 下载国内淘宝镜像三、下载Node.js项目一、Node安装 首先我们进入Node的官网链接: 下载链接 点击下载,选择自己对应的版本,博主这边使用的Windows 安装包 (.msi) 下载之后双击运行下载包点击下一步 点击change 安装完…

【Vue】悬浮窗和聚焦登录组件经验总结

前言 ​ 本文整理了实现悬浮窗以及聚焦登录组件的功能。 ​ 为的是方便大家和自己的学习。 ​ 省流:可以只看1.2 和 2的代码即可 1 悬浮窗 现在各大流行视频网站的平台都在使用这种悬浮显示的效果,我就想这种东西是怎样搞出来的呢!几经尝…

Vue项目保持用户登录状态(localStorage + vuex 刷新页面后状态依然保持)

在前端项目开发中,实现用户的登陆注册功能时常常会有一个问题,那就是我们设置的登录状态,在浏览器页面刷新后就消失了,这其实只是因为我们没有保存用户状态。 这里小马演示使用的是 localStorage vuex 方法(其他诸如…

SpringBoot+Vue实现简单用户管理平台第一篇(后端接口设计)

🚀 注重版权,转载请注明原作者和原文链接🥭 作者:Yuan-Programmer🍎 主页:https://blog.csdn.net/weixin_47971206/article/details/121368075?spm1001.2014.3001.5502🍉 进来的小伙伴点点赞呀…

nuxt3:我们开始吧-开发-配置-部署

一、背景介绍 2022 年 11 月 16 日,全球最大的 Nuxt 会议 Nuxt Nation 2022 在线举行,并正式发布了 Nuxt.js 3.0 的第一个稳定版本。Nuxt 3 是基于 Vite、Vue3 和 Nitro 的 Nuxt 框架的现代重写,具有一流的 Typescript 支持,是两年…

前端基础从头学——VsCode使用教程+html基础(入门篇)

作者简介:hello!大家好,初学前端知识,请多多指教。 希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~ 文章目录前言一、VsCode编辑器使用教程1、VsCode的下载与安装2…