VUE下载及安装

article/2025/9/29 11:09:10
  1. 下载node.js
    node.js下载 ,选择长期维护版在这里插入图片描述
  2. 安装NODE,直接全部默认,不要安装在C盘
  3. 设置NODE
    在nodejs安装路径下,新建node_global和node_cache两个文件夹,这是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以创建,是因为以后在执行类似:npm install express [-g] (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。一般放在了 node的安装目录下
    在这里插入图片描述
    创建完两个文件夹之后,打开cmd窗口
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
在【系统变量】下新建【NODE_PATH】,输入【D:\Program Files\nodejs\node_modules】,将【用户变量】下的【Path】中的【C:\Users\用户名\AppData\Roaming\npm】修改为【D:\Program Files\nodejs\node_global】
在这里插入图片描述
在这里插入图片描述
更改npm的镜像以及安装cnpm,因为npm的原镜像是在国外,使用起来可能会很慢,所以需要更改到国内的淘宝镜像

npm config set registry https://registry.npm.taobao.org
查看命令为 npm config get registry

安装cnpm包管理器(可不安装,不建议使用cnpm)

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

安装VUE

npm install vue -g      # -g  是全局安装的意思

安装完成后检查确保vue安装在了全局模块目录:
在这里插入图片描述
安装vue-cli(已废弃,vue-cli高版本已更名为@vue/cli)

npm install -g vue-cli(高版本已弃用)
npm install -g @vue/cli

安装webpack及webpack-cli

npm install -g webpack
npm install -g webpack-cli

创建新项目(已废弃,vue-cli创建项目的方法)

新建project文件夹,进入project目录下。通过webpack模板创建新项目,假设新项目名称为test01:vue init webpack test01

接下来的提示根据情况选择默认值或选择yes ,no
在这里插入图片描述
创建完成后如下图所示:
在这里插入图片描述

根据提示,进入test01目录,通过命令npm run dev启动示例,在浏览器中输入地址:http://localhost:8080,即可看到示例页面
在这里插入图片描述
Ctrl+C可停止服务器实例,至此 VUE环境已搭建完成

创建新项目(@vue/cli创建项目)

操作命令:vue create vue-test01 根据提示,一步步完成即可

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

相关文章

全网最新的vue.js下载和安装的3种方法(2023年)

文章目录 1. 文章引言2. 环境搭建3. 安装vue.js3.1 方法一:官网下载vue.js源代码3.2 方法二:使用npm install创建3.3 方法三:使用bower下载 4. 总结 1. 文章引言 我主要从事java后端开发,但对前端也非常感兴趣,立志成…

Vue连接MySql数据库

一、vue-cli2 全局安装 npm install vue-cli -g 局部安装项目 vue init webpack 项目名称 例如:vue init webpack demo1 二、express-generator 1.全局安装 npm install express-generator -g 2.express --viewejs 项目名称 例如:express --view…

vue+mysql实现前端对接数据库

下载引入相关依赖 1、cnpm install --save mysql 2、cnpm install --save axios 3、cnpm install --save body-parser 4、cnpm install --save express 5、cnpm install --save crypto 在main中引入axios import Axios from axios Vue.prototype.$axios axios 配置连接…

vue下载与安装详细教程

1、安装node(网址:https://www.bilibili.com/video/BV1LA411u7dE?t10) ①、进入node官网https://nodejs.org/zh-cn/ 点击下载,选择适配的 ②、 双击安装,安装路径随意,勾选第四项,把node添加进…

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…