Vue3.X 创建简单项目

news2025/1/19 2:52:24

一、环境安装与检查

  • 首先,我们要确保我们安装了构建vue框架的环境,不会安装的请自行百度,有很多安装教程。
  • 检查环境
  • node -v  
    
    # 如果没有安装nodejs请安装,安装教程自行百度
    vue -V
    
    # 没有安装,请执行
    
    npm install -g @vue/cli  

     这些环境都安装了之后就可以进行vue项目的搭建了。

二、vue项目搭建

  1.  进入你要创建vue项目的目录下进行项目创建,输入:vue create “项目名称”, 例:
  2. vue create project-app
    

    选择 Manually select  features  选项,进行自行配置

  3.  选择完这几个之后回车
  4. 选择 版本 3.x

       第一个选项选择N,不要history mode for router,之后的选项都默认选择第一个,直接按回车键,直到来到这里选择是否记住上述的配置项,下次创建vue项目时还是按这种配置创建,这里我们选择N;

 

 选择N之后,我们只要等待项目创建完成即可;下图表明已经创建完成。

三、编辑项目

我用的是VScode编辑器打开,可以看看项目文件的结构

在当前目录下启动项目:npm  run  serve

 浏览器访问:http://127.0.0.1:8080

 为了不会因为格式等问题而报错,我们需要在 vue.config.js  中添加    lintOnSave: false  ,之后重新执行:npm  run  serve  重启项目,这样就不会出现格式问题的报错。

 好了,vue3.X项目的创建就结束了。

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

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

相关文章

数据挖掘 | 零代码采集房源数据,支持自动翻页、数据排重等

1 前言 城市规划、商业选址等应用场景中经常会对地区房价、地域价值进行数据分析,其中地区楼盘房价是分析数据中重要的信息参考点,一些互联网网站上汇聚了大量房源信息,通过收集此类数据,能够对地区房价的分析提供参考依据。 如何…

ld链接文件和startup文件分析和优化--基于RT1176

ld链接文件关系到程序的代码段数据段bss段及其用户自定义段的运行位置,ld文件中的各个段都会在main函数之前,从加载域拷贝到运行域中。本章将具体介绍如何修改ld和startup文件。 软件平台:VSCODEGCC工具链 硬件平台:rt1176开发板…

如何在HTML中使用React

突发奇想 查了查真的可以,官方文档: 在网站中添加 React – React 开始 引入js <!-- 开发环境使用 --><script src"https://unpkg.com/react18/umd/react.development.js"></script><script src"https://unpkg.com/react-dom18/umd/reac…

ROS局部路径规划器插件teb_local_planner流程梳理(下)

在我之前的文章《ROS导航包Navigation中的 Movebase节点路径规划相关流程梳理》中已经介绍过Move_base节点调用局部路径规划器插件的接口函数是computeVelocityCommands&#xff0c;本部分来&#xff0c;我们从这个函数入手梳理teb_local_planner功能包的工作流程。 ☆注&#…

进入银行科技部半年,已经丧失跳槽的能力了

大家好&#xff0c;我是锋哥!&#xff01; 学弟分享 我是一个杭州双非的本科生&#xff0c;2022届毕业之后进了某银行的科技部工作&#xff0c;年包 20w。 当时想着在银行也算是一份安稳的工作&#xff0c;因此选择了给钱最多的一个&#xff0c;想着自己走上了金融 科技的赛…

Compose - 修饰符 Modifier

一、概念 四大使用场景&#xff1a; 修改外观&#xff08;尺寸、样式、布局、行为&#xff09;。添加额外信息&#xff08;如无障碍标签&#xff09;。添加交互功能&#xff08;点击、滚动、拖拽、缩放&#xff09;。处理用户输入。 1.1 为组合函数添加 Modifier 参数 任何一…

Linux网络编程:网络基础

文章目录&#xff1a; 1.协议 2.锁 3.网络层次模型 4.以太网帧和ARP协议 5.IP协议 6.UDP协议 7.TCP协议 8.BS模式和CS模式 9.网络套接字(socket) 10.网络字节序 11.IP地址转换函数 12.sockaddr地址结构 学习Linux的网络编程原则上基于&#xff1a;Linux的系统编程…

中大许少辉博士《乡村振兴战略下传统村落文化旅游设计》中国建筑工业出版社八一付梓。

中大许少辉博士《乡村振兴战略下传统村落文化旅游设计》中国建筑工业出版社八一付梓。

gdb调试的经验基本流程处理

一、启动调试 1、gdb启动 gdb启动非常简单&#xff0c;只要直接执行下面的命令&#xff1a; gdb exename(调试文件的名称)2、设置参数 如果需要调试的程序需要输入参数怎么办呢&#xff1f;有三种方法可以实现&#xff1a; a、在启动调试程序时使用命令参数设置 gdb --args …

Linux中启动docker 出现 ‘ Failed to start docker.service: Unit not found. ’ 错误

启动docker 出现 ‘ Failed to start docker.service: Unit not found. ’ 错误 这是因为缺少 rhel-push-plugin.socket 单元&#xff0c;该单元是rhel-push-plugin软件包的一部分。所以我们执行以下指令就可以成功解决&#xff1a; curl -sSL https://get.docker.com/ | sh 执…

搭建redis集群

前言 redis 集群分为一下几种&#xff1a; 【主从模式】&#xff1a;一般情况大多都是读多写少的情况&#xff0c;主从模式可以将读写分离&#xff0c;主库写&#xff0c;从库只负责读取的情况&#xff0c;这从如果任何一个从库宕机的情况&#xff0c;整个集群仍然可以提供工作…

使用GUI Guider工具开发嵌入式GUI应用(6)-切换多screen换场景

使用GUI Guider工具开发嵌入式GUI应用&#xff08;6&#xff09;-切换多screen换场景 本节将展示使用GUI Guider实现切换显示页面功能。 这里设计的用例是&#xff1a; 创建3张页面&#xff0c;screen_0,screen_1和screen_2。分别在每个页面上中放置一个Label&#xff08;最…

仿牛客论坛项目day7|Kafka

一、阻塞队列 创建了一个生产者线程和一个消费者线程。生产者线程向队列中放入元素&#xff0c;消费者线程从队列中取出元素。我们可以看到&#xff0c;当队列为空时&#xff0c;消费者线程会被阻塞&#xff0c;直到生产者线程向队列中放入新的元素。 二、Kafka入门 发布、订阅…

亿图脑图MindMaster思维导图及亿图图示会员-超值途径

亿图脑图MindMaster思维导图及亿图图示会员 先简单看一下这两软件&#xff1a; MindMaster 亿图图示 丰富的社区&#xff0c;便捷易操作的界面&#xff0c;还有耐看的UI设计&#xff1b;要是再有点特权&#xff0c;真的是锦上添花~ 如果需要MindMaster思维导图或者亿图图示VIP…

Android Retrofit原理浅析

官方地址:Retrofit 原理:Retrofit 本质上是代理了OKhttp,使用代理模式,Type-Safe 类型安全 编译器把类型检查出 避免类型错误, enqueue 异步 切换线程 execute 同步 不切换线程 enqueue:Call接口定义的抽象方法 Retrofit.Create() 方法首先验证接口validateServiceInterf…

ps吸管工具用不了怎么办?

我们的办公神器ps软件&#xff0c;大家一定是耳熟能详的吧。Adobe photoshop是电影、视频和多媒体领域的专业人士&#xff0c;使用3D和动画的图形和Web设计人员&#xff0c;以及工程和科学领域的专业人士的理想选择。Photoshop支持宽屏显示器的新式版面、集20多个窗口于一身的d…

小数据 vs 大数据:为AI另辟蹊径的可操作数据

在人工智能背景下&#xff0c;您可能已听说过“大数据”这一流行语&#xff0c;那“小数据”这一词呢&#xff0c;您有听说过吗&#xff1f;无论您听过与否&#xff0c;小数据都无处不在&#xff1a;线上购物体验、航空公司推荐、天气预报等均依托小数据。小数据即一种采用可访…

webpack 和 ts 简单配置及使用

如何使用webpack 与 ts结合使用 新建项目 &#xff0c;执行项目初始化 npm init -y会生成 {"name": "tsdemo01","version": "1.0.0","description": "","main": "index.js","scripts&…

java_免费文本翻译API_小牛翻译

目录 前言 开始集成API 纯文本翻译接口 双语对照翻译接口 指定术语翻译接口 总结 前言 网络上对百度&#xff0c;有道等的文本翻译API集成的文章比较多&#xff0c;所以集成的第一篇选择了小牛翻译的文本翻译API。 小牛翻译文本翻译API&#xff0c;支持388个语种&#xff0…

CrossOver2023快速在Mac和Linux系统上运行Windows软件

让您可以在 Mac 和 Linux 系统上运行 Windows 应用&#xff0c;不必购买 Windows 授权&#xff0c;不必重启系统&#xff0c;不必使用虚拟机。通过 CrossOver&#xff0c; 您可以从 dock 直接启动 Windows 应用&#xff0c;与您的 Mac 和 Linux 系统功能无缝集成。 无需重启 Cr…