vue下载与安装详细教程

article/2025/9/29 11:31:38

1、安装node(网址:https://www.bilibili.com/video/BV1LA411u7dE?t=10)

①、进入node官网https://nodejs.org/zh-cn/ 点击下载,选择适配的

在这里插入图片描述
在这里插入图片描述

②、在这里插入图片描述
双击安装,安装路径随意,勾选第四项,把node添加进path

在这里插入图片描述

勾选,帮我们自动下载插件
在这里插入图片描述

③、在cmd中输入node -v,若出现版本号,则安装成功

在这里插入图片描述

④、如果npm包管理不想存放C盘的话,那就手动创建红框里的两个文件夹于安装路径中


在这里插入图片描述

https://developer.aliyun.com/special/mirrors/notice?from=tnpm

上一行网址可能会出现[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yeTogWy3-1623340224640)(file:///C:\Users\17813\AppData\Local\Temp\ksohtml29764\wps10.jpg)]
,所以直接把下一行输入在cmd中

npm install -g cnpm --registry=https://registry.npm.taobao.org/

安装成功后在cmd里输入cnpm -v判断是否安装成功

⑤、设置成功后所有全局安装的包,都会放到node_global文件夹中

在这里插入图片描述

2、安装完node、cnpm后开始安装vue3脚手架

输入cmd命令语句时,如果之前安装过2.x,那么在后边加上-init,向下兼容2.x版本
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

安装完后判断是否成功

在这里插入图片描述

3、创建一个vue项目:

两种方式:①在cmd里输入命令行vue ui跳转到网页在进行操作

​ 网址https://www.bilibili.com/video/BV1Uy4y1E7qu?t=78

​ 只在vue3中才能实现

​ ②在idea里创造一个文件夹,在该文件夹目录的terminal 里输入vue create 项目名称,后续略

​ 网址https://www.bilibili.com/video/BV137411B7vB

​ 在vue2、vue3中均可实现

①:在cmd里输入vue ui(此后不能关闭cmd),跳转成功后,点击”创建”

在这里插入图片描述

选个想要的文件夹,双击进入,再点击创建

在这里插入图片描述

写入想要的名字,关掉初始化git仓库

在这里插入图片描述

点击下一步,选择手动

在这里插入图片描述

开启Router和Vuex,关闭Linter/Formatter(代码自动校验),下一步

在这里插入图片描述

打开历史记录,创建项目

在这里插入图片描述

点击创建项目,不保存预设

在这里插入图片描述

会发现页面在加载,cmd中在运行,漫长等待

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

npm config set registry https://registry.npm.taobao.org

设置完加速后效果非常显著:

在这里插入图片描述

创建完成
在这里插入图片描述
在这里插入图片描述

然后点击任务,再点击运行(这张图是已经点击运行后的,所以②处是停止)

在这里插入图片描述

当输出中出现两个蓝色地址说明运行成功了

在这里插入图片描述

在cmd里点击ctrl+c,就是退出,再点击y确认

在这里插入图片描述
在这里插入图片描述

但我们最终需要在idea中使用 vue,所以还需在idea中打开该项目。

注意点:vue的创建只能通过vue ui或终端,无法直接在idea的项目创建中创建,所以该方式①需要现在如上所述创造万一个项目的前提下,进入idea,找到创建好的项目,对其打开

(如何打开初始界面,百度搜索:怎样取消idea默认打开工程)

在这里插入图片描述

如果不是open or import选项,那就点击

在这里插入图片描述

找到之前创建的项目文件路径C:\Users\17813\VueProject\vuetest

成功打开后还需要在idea里安装插件,点击file,点击settings,再点击plugins

搜索vue,点击install

在这里插入图片描述

装完之后,重启idea,发现可以开发了

在这里插入图片描述

如果在main.js中的包引入部分报错,那就在settings里找到javascript,换成6就版本对应

在这里插入图片描述

在idea里如何启动vue:

打开terminal终端,输入npm run serve

在这里插入图片描述

点击红框里上部分的地址,跳转到如下页面说明启动成功

会发现一个问题,这个网页的布局排版与项目文件里的App.vue里的代码格式完全一致

在这里插入图片描述

想退出时在terminal里按键位ctrl + c


http://chatgpt.dhexx.cn/article/hGBw2WcO.shtml

相关文章

Vue下载与安装

首先安装node.js环境: node.js安装推荐文章:https://www.cnblogs.com/zhouyu2017/p/6485265.html 基于node.js安装淘宝镜像npm install -g cnpm --registryhttps://registry.npm.taobao.org 安装全局vue-cli脚手架,用于帮助搭建所需的模板框架 在cmd…

【Vue前端】Vue+MySQL(整体用到vue-vli、ElementUI)

提示:小白自学Vue前端,记录一些知识点 VueMySQL(整体用到vue-cli、ElementUI) 目录一、相关准备1. 连接数据库2. 添加相关依赖 二、 使用步骤1. userApi.js2. db.js3. index.js4. server目录下新建sqlMap.js5. register.vue6. main.js7. 启动…

vue项目之js对Mysql数据库操作

vue项目之js对Mysql数据库操作 文章目录 vue项目之js对Mysql数据库操作前言一、相关插件安装二、搭建本地服务器三、启动服务器四、前端Vue访问接口进行数据交互结尾 前言 js对数据库的基本操作 一、相关插件安装 下载express,Express 的作用和 Node.js 内置的 htt…

Vue.js + express +mysql实现数据库增删改查

Vue.js express mysql实现数据库增删改查 1、 下载安装Node.js 在Node.js官网可下载 2、下载vue-cli脚手架 npm install vue-cli -g 3、 创建项目 后面是项目名称,在安装项目过程中需要选择安装vue-router vue init webpack mysqlconnect 4、安装vue-resource依赖…

vue、jdk、nodejs、maven、tomcat、git、MinGW、mysql、navicat下载与安装

常用Java工具配置操作 文章目录 常用Java工具配置操作一、Vue1.vue2.0安装与项目搭建1)基本环境安装2)项目搭建 2.vue3.0安装与项目搭建1)基本环境安装2)项目搭建 3.升级Vue3.0项目4.小操作 二、JDK三、NodeJs四、Maven五、Tomcat六、Git七、MinGW八、MySql1.下载mysql2.使用命…

生信技能树 linux下安装bowtie2和使用bowtie2进行初步比对

linux下安装软件 echo $PATH ##查看路径echo $PATH|tr ":" "\n"|xargs ls -lh ls -lh /usr/bin 下载安装Bowtie2 首先在root下新建一个Biosoft的文件夹,切换目录到该文件夹 cd Biosoft 再在该文件夹下,新建一个Bwotie2的文件夹 mk…

LCWGS(6)在Linux服务器上安装Bowtie2

Bowtie2是一种用于将序列读段与长参考序列进行比对的超快且内存高效的工具。它特别擅长对齐大约50到100或1000个字符的读段,并且特别擅长对齐相对较长的(如哺乳动物)基因组。Bowtie2用FM索引对基因组进行索引,以保持其占用的内存空…

Bowtie2去除污染的使用方法

简介 Bowtie 2是一种用于长参考序列对齐测序读取的工具。它尤其擅长将大约50-100多个字符的比对到相对较长的(例如哺乳动物)基因组。Bowtie 2支持gapped, local,and paired-end alignment模式。可以同时使用多个处理器以实现更高的对齐速度。 使用方法 b…

html怎么删除链接css,css如何去掉链接的下划线?

我们在HTML网页制作过程中,相信大家对超链接这个概念并不陌生。我们都知道想要给某段文本或者指定元素添加一个锚点也就是超链接需要用到HTML中的a标签。 在使用a标签时文本超链接会自动出现下划线!这就让一些小白们感到苦恼了,因为从视觉美观…

CSS学习笔记

目录 1. 学习CSS的基础 1.1 基本语法规范 1.2 引入方式 2. 选择器 2.1 选择器的功能和种类 2.2 基础选择器 2.3 复合选择器 2.3.1 后代选择器 2.3.2 子选择器 2.3.3 并集选择器 2.3.4 伪类选择器 3. 常用元素属性 3.1 字体属性 3.2 文本属性 3.3 背景属性 3.4 圆角…

HTML 类别选择器下划线,css text-decoration下划线 删除线 上划线属性样式

一、DIV+CSS下划线基础 DIV CSS text-decoration下划线、删除线、上划线属性,本节介绍使用div+css样式实现文字字体下划线、字体删除线贯穿线、上划线样式。 1、CSS控制下划线出现用到地方 - TOP 在DIV CSS网页中常常使用CSS代码来人对象文字内容加上下划线。 使用CSS属性单词…

html p标签 删除线,strike html 删除线 贯穿线标签

html 标签元素,删除线标签元素\贯穿线标签元素 配置文本翰墨字体删除线标签 ,字体翰墨上中穿一线画一横,经常在价值原价与优惠价值用到,原价数字上运用删除线成就,当初优惠价钱数字畸形显现。 一样平常对文字、数字等…

iOS 删除线不显示问题 10.3以后

更新到最新的系统后,删除线不显示,低版本没问题。 解决方法: 添加NSBaselineOffsetAttributeName就可以了 例如: [orignalAtt addAttributes:{NSBaselineOffsetAttributeName:(NSUnderlineStyleSingle),NSBaselineOffsetAttrib…

用css怎样实现波浪线,Css3实现波浪线效果1

一、波浪线 ,常用 .info::before {content: ; position: absolute; top: 30px; width: 100%; height: 0.25em; background: linear-gradient(135deg, transparent, transparent 45%, #008000, transparent 55%, transparent 100%), linear-gradient(45deg, transparent, trans…

css如何去掉表格中的线,css怎么设置表格线

css设置表格线的方法:首先新建一个html文件;然后使用table标签创建一个两行两列的表格;接着设置table表格的id为testable;最后使用border属性设置表格线为1px的红色线即可。 本文操作环境:windows7系统、HTML5&&am…

小程序中适用—css样式_删除线等

text-decoration下划线CSS单词值参数: none :  无装饰 blink :  闪烁 underline :  下划线 line-through :  贯穿线 overline :  上划线 text-decoration:none 无装饰,通常对html下划线标签去掉下划线样式 text-decoration:underline 下划线样式 t…

php函数删除线,如何用css设置删除线样式?(代码详解)

本篇文章主要给大家介绍关于css删除线的设置实现方法。 相信大家在浏览各大商城网站时,都会看到一些关于产品促销的效果,比如某个产品的原价标记为多少,现价又改成了多少,并且为了用户发现更直观的差距,通常会在原价上…

css 线怎么改颜色,css删除线颜色怎么设置

在css中可以通过text-decoration属性设置删除线颜色,其设置语句如“text-decoration: line-through red;”,其中red参数则表示删除线的颜色。 本文操作环境:Windows7系统、css3版,DELL G3电脑 text-decoration 属性规定添加到文本…

CSS模块的书写以及删除线的作用和来历什么是删除线

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>/*关羽这一行代码变为绿色*/#gy_li{color: green}/*张飞,苹果这一行代码变为黄色*/#zf_li,#pg_ul{color: yellow}/*i…

css:text-decoration给文字增加上划线、删除线、下划线

CSS 语法 text-decoration: <text-decoration-line text-decoration-style text-decoration-color>text-decoration-line 值描述none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪…