Vue3创建项目(一)新手教程

news2025/2/26 0:26:14

 ✅作者简介:

             我是痴心阿文,你们的学友哥。

整理一下Vue3创建项目,新手教程,看完需要预计花费10分钟。

1.环境准备

Vue依赖NodeJs的环境,需要先安装Nodejs。

2.NodeJs安装

  1. 打开NodeJs下载页
  2. 选择自己系统对应的版本下载。

3. 验证安装

  1. 在cmd命令行中输入 node -v,如果输出版本号则代表安装成功

 

🍉🍉🍉4.安装@vue/cli工具

 在用 Vue 构建大型应用时推荐使用 npm 安装。npm 能很好地和诸如 webpack 或 Rollup 模块打包器配合使用。
打开cmd使用命令全局安装@vue/cli

npm install -g @vue/cli


🍉🍉​​​​​​​🍉安装完成之后在cmd中输入命令验证安装 注意是大写

VUE -V

 

🍉​​​​​​​🍉​​​​​​​🍉5.创建项目

🍓使用命令创建项目

vue create project-name

 

选择镜像源(可能在选择后不会再出现)
命令中的project-name是项目名字,可以自定义,其它的就是固定写法
回车后新版的会提示默认源网速较慢,是否使用淘宝镜像(够人性化)

🍓键盘Y之后回车

选择preset

你会被提示选取一个 preset(如上图)。

包含babel+eslint的vue2版本;
包含babel+eslint的vue3版本;
自己手动选择。
既然本文是vue3,那就可以选择vue3
上下键选择,回车是确认

🍓 等待项目初始化完成..............

 

🍓根据命令提示依次进入项目文件夹、启动项目

 # 进入目录
$ cd myproject
# 启动项目
 $ npm run serve

🍓完成 

 

 成功后的截图

下面再看下项目结构

项目结构

后面就是写页面写功能了。 看到这的同学,帮忙点个赞关注支持一下呗

🍓结束语🏆

       🍉 学无止境,汇总还未结束,后续新出会陆续补充...

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

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

相关文章

【JAVA】书店管理系统(附带前后端源码及资源)

【JAVA_Web】书店管理系统(附带前后端源码及资源) 一、项目的目的和意义 1.1目的 在“互联网”的大趋势下,线上销售以其简单、便捷、高效的特点受到人们的青睐。网上书店不受时间或者空间的限制,只要在网络覆盖的地方人们就可以…

vue3 动态加载组件、动态引入组件

1.问题 在做一个用vite构建的vue3项目时,动态拉取导入.vue页面,然后控制台一直有以下提示,页面也无法渲染出来。 2.分析 根据上面的报错提示,让我们安装并使用:rollup/plugin-dynamic-import-vars 这个插件&#xff0…

JS遍历对象的七种方法

我根据阮老师的《ES6标准入门》学习并总结了七种遍历对象的方法,我会将分别介绍这七种方法并进行详细的区分,并将从属性可枚举性问题与遍历方法两个大方面讲述全文,其中可枚举性是掌握遍历对象之前的的铺垫,请读者耐心学习&#x…

【解决vscode终端输出中文乱码问题图文教程】

全网最全解决vscode运行C/C终端输出乱码问题图文教程解决vscode终端输出中文乱码问题,强推**方法二**,少走几年弯路乱码原因方法一(永久性)方法二(永久性)强力推荐!!!&am…

Vue3中样式渗透:deep()为什么无效

今天学习 /deep/ 样式穿透,因为vue3中已经使用:deep()取代了/deep/ ,所以直接用:deep()练习。 :deep()的使用场景: 如果给当前组件的style 节点添加了scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组…

DVWA(全级别通关教程详解)

文章目录Brute ForceLowMediumCommand InjectionLowMediumHighCSRFLowMediumHighFile InclusionLowMediumHighFile UploadLowMediumHighSQL Injection (手工)LowMediumHighSQL Injection(工具)LowMediumHighSQL Injection (Blind)Low布尔盲注时间盲注XSS…

若依RuoYi框架log图标与文字怎么改?

文章目录1.若依修改主界面图标2.若依修改主界面文字3.若依修改页面上方图标4.若依修改页面上方文字5.若依登录页面文字修改6.免费图片转换网站1.若依修改主界面图标 图片路径: /src/assets/logo/logo.png直接将想要替换的png格式图片将其替换即可,图片大小建议为60*…

Vue的生命周期的详解

Vue的生命周期 Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识,以此作为记录。 Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初…

vue中input标签上传本地文件或图片后获取完整路径,如E:\medicineOfCH\stageImage\xxx.jpg

前言&#xff1a; 好久没有写vue了。今天遇到一个需求&#xff1a;使用input框来上传图片类型&#xff0c;并且在选择之后立刻回显出来。使用< input type“file”/>在选定图片后再< img src“xxx”/>。今天在实现这个需求的时候主要是出现了三个问题&#xff1a;…

分享 6 个 Vue3 开发必备的 VSCode 插件

今天分享 6 个 Vue3 开发必备的 VSCode 插件&#xff0c;可以直接用过 VSCode 的插件中心直接安装使用。 如果有觉得有帮助&#xff0c;还请点赞&#x1f44d;支持一下~ 1. Volar &#x1f525; 下载数 153 万 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生&…

40个web前端实战项目,练完即可就业,从入门到进阶,基础到框架,html_css【附视频+源码】

当下前端开发可以说是一个比较火的职业&#xff0c;所以学习的人比较多&#xff0c;不管是培训还是自学都是希望通过前端可以找到一份好的工作&#xff0c;但是很多自学的朋友在自学过程中有些盲目&#xff0c;不仅大大降低了学习的效率&#xff0c;而且也会打击自己的学习热情…

使用nvm安装node

常用命令 NVM的常用命令如下&#xff1a;nvm list available&#xff1a;查看可在线安装的NodeJS版本nvm ls&#xff1a;列出所有已经在NVM中安装的NodeJS版本。nvm current&#xff1a;显示当前正在使用的Node版本。nvm install xx.xx.xx&#xff1a;在NVM中在线安装指定版本的…

nvm安装步骤及使用方法

一、nvm说明 nvm 主要是用来管理 nodejs 和 npm 版本的工具&#xff0c;可以用来切换不同版本的 nodejs。 二、nvm下载 https://github.com/coreybutler/nvm-windows/releases 三、nvm安装 1.解压缩后点击exe文件进行安装 2、点击next&#xff0c;选择nvm安装路径&#xf…

Vue:vue3中封装Axios请求

解决、 提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、创建文件夹存放封装好的js二、封装代码三、配置四、在需要的组件中使用总结前言 这篇文章直接能够在项目中使用&#xff0c;没有解释什么东西&#…

安装运行vue-element-admin的报错问题-解决办法

一、原本的安装方法-出错 官网安装链接如下&#xff1a; https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%AE%89%E8%A3%85 我遇到的报错主要在以下阶段&#xff1a; 按上方安装链接里git clone后npm install无法安装npm install完成后无法启动&#xff0…

vue中的proxy代理的使用(解决跨域问题)

声明 1. 首先我们应该知道&#xff0c;前端axios在本地发送的请求如果你不把路径写全&#xff0c;它都是会默认加上自己项目所在的端口&#xff0c;就比如说&#xff1a; axios.get(/login) axios.get(/hello) 当我点击发送按钮之后&#xff0c;以上两行代码实际为&#xff1a;…

使用alist将云盘映射为WebDAV

使用alist将云盘映射为WebDAV1. 下载2. Windows系统安装与配置2.1 alist 启动与配置2.2 添加启动与关闭的脚本2.3 开机启动3. Linux系统安装与配置3.1 alist 启动与配置3.2 守护进程​4. 测试 WebDAValist是一款开软的将网盘及本地硬盘映射到网络端的软件&#xff0c;支持多种存…

【Web前端】怎样用记事本写一个简单的网页-html

前言 出于对网站的一些突然的兴趣&#xff0c;我开始了解网页是如何被设计出来的。 作者水平有限&#xff0c;如有问题&#xff0c;欢迎指出。 文章目录前言一. 对网页设计的基本了解1. 网站2. 网页编辑工具1&#xff09;语言2&#xff09;软件二. 第一个网页1. 实操——用记事…

watch跟computed的区别

大家好,我是大帅子,今天给大家讲一下watch跟computed的区别,下面我们直接开始吧 功能上&#xff1a;computed是计算属性&#xff0c;watch是监听一个值的变化&#xff0c;然后执行对应的回调。 是否调用缓存&#xff1a;computed中的函数所依赖的属性没有发生变化&#xff0c;…

【Web 安全】XSS 攻击详解

文章目录一、XSS 攻击概述二、XSS 攻击原理1. XSS的攻击载荷&#xff08;1&#xff09; script 标签&#xff08;2&#xff09; svg 标签&#xff08;3&#xff09; img 标签&#xff08;4&#xff09;body 标签&#xff08;5&#xff09; video 标签&#xff08;6&#xff09;…