Vue的环境配置

news2024/11/19 19:25:11

vue环境配置安装地址:安装 — Vue.js

一、Node官网地址:下载 | Node.js 中文网

 

查看node版本∶打开命令工具,执行"node -v"命令查看版本号。

二、git-bash命令行工具

 git-bash命令行工具官网地址:Git

 

查看git版本:打开命令工具,git --version

 三、npm包管理工具

npm官网地址:npm 中文文档 | npm 中文网

1. npm的基本概念:npm(Node.js Package Manager)是一个Node.js的包管理工具,用来解决 Node.js代码部署问题。

2. 使用场景需求: 从npm服务器下载别人编写的第三方包到本地使用。 从npm服务器下载并安装别人编写的命令程序到本地使用。 将自己编写的包或命令行程序上传到npm服务器供别人使用。

3. 常用命令: npm install:安装项目所需要的全部包,需要配置package.json文件。 npm uninstall:卸载指定名称的包。 npm install 包名:安装指定名称的包。 npm update:更新指定名称的包。 npm start:项目启动。 npm run build:项目构建。

四、Chrome浏览器和vue-devtools扩展

vue-devtools:vue-devtools是一款基于Chrome浏览器的扩展,用于调试Vue应用,只需下载官方压 缩包,配置Chrome浏览器的扩展程序即可使用。

安装教程:https://www.jianshu.com/p/8bba67b017ff

命令:

npm install

num run build

五、脚手架安装

打开命令行工具,通过npm方式全局安装@vue/cli脚手架,具体命令如下:

npm install -g @vue/cli

 

安装完成后,检测是否安装成功,使用如下命令来查看vue-cli的版本号:

vue –V(或者vue --version)

 

六、使用vue create命令创建项目

在命令行中切换到项目存储目录,创建一个名称为my-project的项目,具体命令如下:

vue create my-project #创建项目

cd my-project #cd到项目中

npm run serve #项目运行

 

 

vscode 终端呈现

 

如果报错解决办法:

解决方法: 以管理员权限打开windows powershell,输入set-ExecutionPolicy RemoteSigned,选择y即可

 

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

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

相关文章

【Vue】跳转外部链接并携带参数并触发

需求: 当平台运行多个系统时("系统一","系统二" 都是不同时间段开发的) 可以从"系统一"点击按钮跳转到"系统二",并且完成 "系统二" 登录操作,直接显示&…

【小程序项目开发 --- 京东商城】 启航篇之uni-app项目搭建

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

【VUE3】ElementUI--el-date-picker下拉控件样式修改(高亮显示设置)

ElementUI--el-date-picker下拉控件样式修改一些废话事发背景实现效果实现思路总结和完整代码参考资料一些废话 默默做前端,分享一些自己在项目需求实现中遇到的奇妙问题(主要是网上搜索不到解决办法自己解决后的总结方法和解决办法但不全面,…

关于oss使用sts 后台签发临时token前端直传大文件的错误记录

文章目录前言遇到的问题1. NoSuchBucket : The specified bucket does not exist.2. com.aliyuncs.exceptions.ClientException: InvalidParameter.RoleSessionName : The parameter RoleSessionName is wrongly formed.3. 报错:Access to XMLHttpRequest at 上传ur…

servlet交互过程图详解,servlet的常见问题,创建web项目(一)

目录 一.B/S模式和C/S模式 C/S:客户端服务器端结构模式 B/S:浏览器服务器模结构模式 B/S结构图: 二.创建web项目 三.举例说明Servlet执行流程图: 四.Servlet项目中常见的问题 一.当创建web项目时,没有勾选Java …

一篇文章吃透 CSS3 属性: transition过渡 与 transform动画

最近有人私信我 CSS 中的 transition (过渡) 和 transform (动画) 属性,这两个属性的参数确实比较复杂,它们可以做出 CSS 的一些基础动画效果,平移,旋转,倾角......等等,这些也是我早期学习 CSS 的难记易忘…

Java Web 开发详解

一、Web基础 1、Web 概述 Web 在英文中的含义是网状物、网络。在计算机领域,它通常指的是后者,即网络。 像 WWW 是由 3 个单词组成的,即World Wide Web,中文含义是万维网。 他们的出现都是为了让我们在网络的世界中获取资源&a…

JS总结——数组,对象遍历的方法

对于数组或者对象的遍历,筛选,提取等操作是前端开发中经常有的需求,不要再只会写普通的for循环了,虽然普通的for循环已经能完成一切的功能的,是一个特殊方法,但是针对各种需求,js给我们提供了许…

uniapp —— 实现左右联动商品分类页面

uniapp —— 实现左右联动商品分类页面 零、前因 我们在日常的开发种,这种页面在项目当中经常会用得到,所以本篇文章会比较注重描述其思路,顺带附上其代码,以便以后在任何代码环境下都能使用上,先介绍一下实现思路&a…

Vue 中 iconfont 使用

图标库的发展过程,iconfont图标库的重要性(项目常用) 对于前端而言,图标的发展可谓日新月异。从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-lo…

npm run 是什么?为什么使用npm run 这一命令,就能够将 webpack 跑起来并进行下一步的操作?

npm run 实际上是衔接 node 和 webpack 的连接点。先看看终端运行的npm是什么,如下图: 图中的关键点是最后一行 C:\Users\***\AppData\Roaming\npm\node_modules\npm。从它可以推断出系统环境变量下配置的npm的路径为C:\Users\***\AppData\Roaming\npm,可以去环境变量中确认…

css实现炫酷充电动画

先绘制一个电池&#xff0c;电池头部和电池的身体 这里其实就是两个div&#xff0c;使用z-index改变层级&#xff0c;电池的身体盖住头部&#xff0c;圆角使用border-radius完成 html部分,完整的css部分在最后 <div class"chargerBox"><div class"ch…

Vue ref获取元素和组件实例

获取元素 获取元素还不简单&#xff1f;直接document.querySelector(“#id”)不就获取到了吗&#xff1f;例如下面的代码。在写Vue的过程中&#xff0c;我们从来不会写这种代码&#xff0c;但是下面的代码在vue里面是可以运行的。 methods:{getEl(){let title document.queryS…

CSS实现: 水平居中 的几种方法

实现方法&#xff1a; 1、添加 margin 值 auto 2、定位 position(子绝父相) 偏移值 left margin-left 回退 [ 需要计算&#xff0c;有点 麻烦 ] 3、定位 position(子绝父相) 偏移值 left CSS-2d transform 4、文字居中 text-align:center; 行内块元素 5、弹性盒子布局 [ 推…

vue之@click绑定的函数,如何实现加不加括号都可执行

这篇文章的由来&#xff0c;其实是朋友在群里好奇click绑定方式的种类&#xff0c;大家七嘴八舌讨论出来的&#xff0c;觉得过程还是比较有意义&#xff0c;就记录下来&#xff1a; 1、原生js绑定点击事件 好久不用原生js绑定事件&#xff0c;基本都已经忘了怎么绑定。还把括号…

es6的some和every方法使用;

文章略长&#xff0c;但比较简单。 es6中的数组方法some()和every()都接收一个回调函数作为参数&#xff0c;该回调函数又接收三个参数&#xff0c;分别是数组元素、数组元素的索引、调用some或every方法的数组本身。它们的区别就是&#xff1a; some方法用于判断数组中是否存…

node-sass安装报错及其解决方案

一、下载依赖报错 这里报错了也就没后面的剧情了&#xff0c;就像电视剧刚开局主角就嗝屁了&#xff0c;看看执行 npm i 的时候报错类容&#xff1a; 二、解决方案 1、下载源在国外&#xff0c;更换中国镜像源&#xff0c;删除package.json中的node-sass,分别下载node包和node-…

你的应用太慢了,给我司带来了巨额损失,该怎么办

记得很久之前看过谷歌官方有这么样的声明&#xff1a;如果一个页面的加载时间从 1 秒增加到3 秒&#xff0c;那么用户跳出的概率将增加 32%。 但是早在 2012 年&#xff0c;亚马逊就计算出了&#xff0c;页面加载速度一旦下降一秒钟&#xff0c;每年就会损失 16 亿美元的销售额…

〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费开放&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外&#xff0c;还可以通过加入星荐…

HTML 基本开发方式,学会常用的 HTML 标签

一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单&#xff0c;语法风格和 Java 之类的差别很大&#xff0c;(并不能表达一些逻辑&#xff0c;而只是能表达 “有哪些东西" 一种信息)&#xff0c;使用记事本创建一个文件&#xff0c;后缀名改成 .html 即可…