VUE2安装步骤

news2025/2/27 5:37:41

一、node.js安装和配置

1.安装前,先看看自己电脑上有没有node.js

打开命令提示符,尽量选择管理员身份打开,或者按win+R,输入cmd打开也行

 打开后输入node -v 查看自己电脑是否安装node,以及版本号

node -v

 我这里显示v16.6.0 就是已经安装了node。

 2.官网下载

最新版本:Download | Node.js(点击下载) 

因为node里面带npm,所以等下配置好环境就可以用npm了,这里下载的时候可以看到下载的版本。

3.配置环境

下载node后记住自己的安装位置,然后配置环境,这一步很多人都发过,可以点击node安装看看博主们发的过程。

4.npm安装淘宝镜像(可跳过)

npm全称Node Package Manager,是node.js的模块依赖管理工具。由于npm的源在国外,所以国内用户使用起来各种不方便。

cnpm与npm都是下载依赖,不过cnpm有时候真的很有用,所以还是有配置一下的必要。

npm镜像的切换
查看当前库:npm config get registry 或者 npm get registry

设置官方库:npm config set registry https://registry.npmjs.org

设置淘宝镜像:npm config set registry https://registry.npm.taobao.org/

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

 复制上述代码配置一下就好。
接下来是Vue的安装了。

二、Vue和脚手架安装

1.安装vue.js

一般是全局安装,-g是全局安装,指安装到global全局目录去。

我需要的是2.0版本的,所以我使用这个命令;(二选一都可以)

npm install  -g  @vue-cli@版本号

也可以是局部安装

npm  i   -D   @vue/cli@版本号 

也可以不写版本号 会直接安装最新版本的   vue -V 是查看安装版本号的

2.创建项目

(1)执行如下代码 (二者选一)

//全局(-g)

vue create 项目名称

//局部  (-D)

npx vue create  项目名称

 (2)输入后会出现三种选项 前两种会自动配置 最后一种是手动配置 可以按照你得自己的需求配置 (按反向键 上下键  为上下移动 选中后 按回车即可)

 (3)我选择时手动配置  选完安回车即可

(4)我们安装的是vue2  选2.0 即可

 (5)后面的三个问题按回车就行  到选择css语言是我选择的是less  他比较简单点

 (6)选择一个linter/formatter配置 我没有选择  直接回车就好

(7)后面的问题基本对我都没用  之间按回车了  之后会出现这样的 (在下载过程中有停顿时间长的话课按回车即可)

 (8)最后根据他的提示 进入你的项目  在执行npm  run  serve   启动项目即可

 

(9)复制第一个链接 在浏览器打开即可  出现vue2 默认页面

 到这里就结束了哦!!!!!

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

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

相关文章

vsCode中vue文件无法提示html标签

铅笔头课堂,有态度的前端培训 今天有同学问到老师:“ 老师,我的vue文件里书写html代码不提示了 ”,这个问题别说还真有点冷门,老师研究了一番之后终于妥善修复了这个问题,这里就将处理结果记录下来&#xf…

如何部署WebSpoon9.0.0(Kettle的Web版本)

前言 Kettle 是小有名气的开源ETL工具,现已改名为PDI(Pentaho Data Integration),其Web版本为:WebSpoon,本文记录了从官方Git仓库中拉取代码并成功运行的过程。 一、在本地拉取并编译项目 参考来源&#…

基于Echarts实现可视化数据大屏大数据可视化

前言 🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,,基于htmlcssjavascriptecharts制作, 可以在此基础上重新开发。 本项目中使用的是echarts图表库,ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图&…

flex 的 三个参数:flex-grow、flex-shrink、flex-basis

前言: 之前对于 flex 布局没有太深刻的理解,往往就只是给 父元素加上 display:flex 属性,在近期学习的过程中了解到 flex 属性是 flex-grow、flex-shrink、flex-basis 三个属性的缩写,来看下面这一个例题&#xff0c…

基于Java Web的图书管理系统

目录 1.系统简要概述 2.系统主要用到的数据库表 3.主要功能 管理员: 用户: 3.1管理员功能 3.11登录 3.12添加学生 3.13查看学生 3.14删除学生 3.15添加书籍 3.16查看书籍 3.2用户端功能 3.2.1登录 3.2.2注册 3.2.3查询图书 3.2.4借阅书籍…

前端实现分页效果

前言 在实际开发中,大部分分页都是配合后端完成的。但是,有时候并不是这样,并非不是这样。后端会一次性返回所有的数据,而我们前端不可能展示所有数据,而是弄一个分页效果。还有一些场景也是需要前端自己弄的分页&…

JavaWeb项目(登录注册页面)全过程详细总结

JavaWeb项目(登录注册页面)全过程总结 文章目录JavaWeb项目(登录注册页面)全过程总结一、环境准备与开发工具二、创建 JavaWeb 项目2.1 新建Dynamic Web Project项目2.2 创建前端页面2.2.1 登录页面1.login.jsp2. login.js3. time.js4. focus.js animate.js2.2.2 注册页面&…

如何使用nvm切换npm版本

我比较懒惰,如非必要,不喜欢npm版本切换来切换去,感觉浪费我编程的时间.后来发现,现在偷的懒都是为将来的忙碌埋下的祸根. 言归正传,本文主要是讲解一下,如何使用nvm进行npm版本的切换. 工欲善其事必先利其器,我们先下载nvm;直接上下载链接(针对windows哈,毕竟我没mac本); 下载…

前端开发工程师简历

简历是什么 找工作之前投递的个人信息和工作能力----不全面 应该是:个人当前阶段的价值体现 前者:我能卖多少钱;后者:我现在值多少钱 建议:每隔半年/一年给自己做总结的时候写一份简历(相当于个人价值总结…

render函数

render函数 通常我们都会把我们的页面结构逻辑都写在 template 中,然后再通过vue将我们的代码转换成虚拟DOM,相比于真实DOM,虚拟DOM是通过js代码处理的,所以消耗的性能相对较小,当然大部分情况下使用 template 创建我…

(详解)Vue设置select下拉框的默认选项(解决select空白的bug)

最近在用vue设置表单数据时发现了一个小问题&#xff1a;用vue动态渲染select下拉框时&#xff0c;select下拉框会出现空白的bug。 <template><div><select name"art-cate" v-model"select"><option disabled selected style"d…

Vue项目启动出现的问题及解决方法

今天在公司入职第二天&#xff0c;昨天拉下来的代码没有跑起来&#xff0c;看了各种博客也没有解决这个报错 今天一大早来公司&#xff0c;捋了一下顺序 ①删除要启动项目里的 node_modules 文件夹&#xff0c;这是vue项目的依赖包。 因为“node_modules”文件夹太大&#x…

《Vue插件》瀑布流插件vue-masonry的使用与踩坑记录

这是一个没有套路的前端博主&#xff0c;热衷各种前端向的骚操作&#xff0c;经常想到哪就写到哪&#xff0c;如果有感兴趣的技术和前端效果可以留言&#xff5e;博主看到后会去代替大家踩坑的&#xff5e; 主页: oliver尹的主页 格言: 跌倒了爬起来就好&#xff5e; 《Vue插件…

Moment.js的基本使用

一、Moment.js的简介 Moment.js是一个轻量级的JavaScript时间库&#xff0c;以前我们转化时间&#xff0c;都会进行很复杂的操作&#xff0c;而Moment.js的出现&#xff0c;简化了我们开发中对时间的处理&#xff0c;提高了开发效率。日常开发中&#xff0c;通常会对时间进行下…

React面试题最全

1.什么是虚拟DOM&#xff1f; 虚拟DOM是真实DOM在内存中的表示&#xff0c;ul的表示形式保存在内存中&#xff0c;并且与实际的DOM同步&#xff0c;这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤&#xff0c;整个过程被称为调和 2.类组件和函数组件之间的区别是什么…

【uni-app】小程序实现微信在线聊天(私聊/群聊)

之前学习使用uni-app简单实现一个在线聊天的功能&#xff0c;今天记录一下项目核心功能的实现过程。页面UI以及功能逻辑全部来源于微信&#xff0c;即时聊天业务的实现使用socket.io&#xff0c;前端使用uni-app开发&#xff0c;后端服务器基于node实现&#xff0c;数据库选择m…

vue3生命周期及setup介绍

&#x1f337; 生命周期 下图对比了vue3&#xff08;左&#xff09;和vue2&#xff08;右&#xff09;的生命周期&#xff1a;vue3将destoryed该名成了unmounted&#xff0c;相应的beforeDestory改成了beforeUnmounted。除此之外在组合式API中新增了个钩子函数&#xff1a;set…

vue项目:大屏自适应解决方案(两种)

css缩放方案&#xff1a; 利用transform&#xff1a;scale 进行适配 推荐使用v-scale-screen 值得注意的是&#xff1a; vue 2.6、2.7 要使用 npm install v-scale-screen1.0.2 vue3&#xff1a;要使用v-scale-screen版本 npm install v-scale-screen2.0.0 用法&#x…

解决npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘)

文章目录1. 复现问题2. 分析问题3. 解决问题1. 复现问题 今天准备克隆Redis桌面(GUI)管理客户端&#xff0c;故按照官方文档给出的指令运行时&#xff0c;如下图所示&#xff1a; 但在执行指令npm install --platformwin32却报出如下图错误&#xff1a; PS D:\Software\Redis…

Vue中使用Datav 完成大屏基本布局

效果图 大屏前言 在实际开发过程中&#xff0c;我们经常需要一个大屏进行一些常规数据的展示。在Vue中也是提供了这样的容器组件 我们可以使用基于Vue的 Datav组件 Vue-Baidu-Map地图组件 Echarts图表组件 时间戳就实现基本布局 在Vue中配置大屏路由的时候&#xff0c;我们…