vue环境搭建(个人学习笔记二)

2023-10-27

友情提醒

先看文章目录,大致了解知识点结构,直接点击文章目录可以跳转到文章指定位置。

第一章、Vue的环境搭建

1.1)什么是node和npm

①Node:是JavaScript的运行时环境。在浏览器中,js是无法操作文件的,而node提供了文件操作。在浏览器中,js无法写服务接口,而node提供了后端代码编写的功能(写后台、操作数据库)。但是我们不会用node写后端,node更多的是给前端项目做配置,如:跨域代理。
②Npm:npm是node提供的一个包管理工具,类似于maven。通过npm去安装依赖包,就不需要在页面上使用script标签引入了。

1.2)node的下载

官网下载地址点击跳转
①点击下载安装,再点击全部安装包
在这里插入图片描述

②选择上级目录
在这里插入图片描述

③找到v16.18.0版本
在这里插入图片描述
④选择windows免安装版本下载,直接解压可用,注意解压的路径不能有中文
在这里插入图片描述

1.3)配置node的环境变量

①复制解压的路径
在这里插入图片描述
②win+E打开管理器–>此电脑–>属性
在这里插入图片描述
③选择高级系统设置
在这里插入图片描述
④选择环境变量
在这里插入图片描述
⑤点击path并编辑
在这里插入图片描述
⑥点击新建,输入刚刚解压的路径: F:\node-v16.18.0
在这里插入图片描述
⑦cmd窗口输入node -v测试,出现如下页面表示安装成功
在这里插入图片描述

1.4)常见的npm命令

注意: -g是全局安装

//安装脚手架
npm install -g @vue/cli 

//卸载vue脚手架
>:npm uninstall vue-cli -g

//强制清除npm缓存:
npm cache clean --force

//再执行安装npm:
npm install -g npm

//npm安装插件
npm install 组件名 -g

//npm卸载插件
npm uninstall 组件名 -g

//npm查看插件
npm list

//设置国内镜像
npm config set registry https://registry.npm.taobao.org

//查看镜像是否切换成功:
npm config get registry

1.5)npm设置国内镜像

①打开IDEA,File—》settings
在这里插入图片描述②tools—>terminal—>修改shellpath—>重启IDEA
在这里插入图片描述
③配置后就可以在IDEA中使用命令行了
在这里插入图片描述
④设置国内镜像
在这里插入图片描述

第二章、脚手架安装

2.1)脚手架安装

①安装命令

//安装脚手架
npm install -g @vue/cli

//卸载vue脚手架
npm uninstall vue-cli -g

②在IDEA中安装脚手架,如果安装失败,卸载重装
在这里插入图片描述

③出现如下提示为成功
在这里插入图片描述

2.2)用命令创建vue工程

①在terminal输入创建命令

vue create 项目名(名称不能有中文,必须全小写,可用下划线)

在这里插入图片描述

②按上下箭头,选择语法模板
在这里插入图片描述
③创建成功后提示successfulsuccessful

2.3)vue工程的目录结构

在这里插入图片描述

2.4)package.json核心文件内容

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue环境搭建(个人学习笔记二) 的相关文章

  • 如何获取 vuejs 组件单元测试中定义的“this”变量

    我正在尝试在 npm 脚本中使用 mocha webpack 来测试 vuejs 组件 我在测试中像这样嘲笑 vuex 商店 const vm new Vue template div div
  • 无法运行 npm install

    In here http devdocs magento com guides v2 0 frontend dev guide css topics css debug html它说要跑npm install 但是当我运行时出现此错误sud
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 简单的 Vue.js 计算属性说明

    我对 Vue js 并不陌生 但我会再次浏览文档 试图找出我第一次错过的任何内容 我在以下地方看到了这个声明使用计算属性的基本示例部分 https v2 vuejs org v2 guide computed html Basic Exam
  • 获取 Node.js npm 命令以在公司代理后面工作

    我正在尝试安装凉亭 npm install g 鲍尔 但我从我们的代理收到身份验证错误 npm http 407http registry npmjs org bower http registry npmjs org bower 错误代码
  • 错误:创建 React Native 项目版本 0.59.9 时找不到 template.config.js

    当我尝试创建 React Native 项目版本 0 59 9 时 出现以下错误 错误错误 无法在 react native 模板中找到 var folders zc h93bvpb573q24 5ynvgkn1wc0000gn T rnc
  • Laravel 使用 laravel-cors 和 axios 进行 POST 的“CSRF 令牌不匹配”

    我有一个正在运行的domain A拉拉维尔 5 8返回 API 的引擎网络路线 它必须检查来源才能只服务几个域 包括domain B Barryvdh laravel cors我安装了barryvdh laravel cors https
  • 如何在公共文件夹中使用静态JS的环境变量

    I have VueJS app Vue CLI 3 和额外的静态JS脚本 in public文件夹 我不明白如何使用 env在这个 js 假设我有一些特定的环境变量 例如MY URL和我的 JS 文件 const myUrl proces
  • 如何从 Vuex 状态使用 Vue Router?

    在我的组件中我一直在使用 this router push name home params id this searchText 要改变路线 我现在已经将一个方法移入我的 Vuex 操作中 当然this router不再有效 也没有Vue
  • Vuex 存储在 vue-router 中未定义

    我有一个路由器和一个全局beforeEach挂钩来验证身份验证 import store from store store const router new Router routes router beforeEach to from n
  • 用 Angular 6 进行业力测试

    我正在尝试使用 npm 运行角度测试 ng test 但问题是 chrome 在测试完成后启动而不停止 所以我使用了 ng test watch false 但这会导致错误 Chrome 69 0 3497 Linux 0 0 0 ERRO
  • Vue.js 拦截器

    我怎样才能使用interceptor in vue js 因此 在每个请求 响应之前 它应该首先进入拦截器 我已经搜索了很多 但找不到关于此的好的文档 我想像这样使用 JWTAuth function define use strict d
  • 当 Axios 中的 responseType 为 blob 和 VueJs 时,如何读取 http 错误? [复制]

    这个问题在这里已经有答案了 我在 VueJS 应用程序中使用 Blob responseType 和 Axios 从服务器下载文档 当响应代码为 200 时 它工作正常并下载文件 但是当出现任何 http 错误时 我在捕获错误时无法读取状态
  • d3-sankey 链接在拖动事件时未更新

    问题一 我无法更新拖动事件上的 d3 sankey 链接 我正在尝试复制与此类似的 d3 垂直和水平拖动事件 https bl ocks org d3noob 5028304 https bl ocks org d3noob 5028304
  • 找不到 npx 命令

    我正在使用 webpack 我需要执行 node modules webpack bin webpack js using npx npx webpack将运行 webpack 二进制文件 node modules webpack bin
  • 在节点模块文件夹中编辑react npm模块的代码

    是否可以更改 module 文件夹中 npm 模块的代码 我认为这不是推荐的做法 还有其他方法可以实现这一目标吗 目前 我尝试更改模块目录中的代码 但更改似乎并不适用 提前致谢 当然你可以改变包的内容node modules因为它是标准化格
  • 使用 NPM 重命名文件

    有没有办法重命名 npm 脚本中的单个文件 我想准备要分发的文件 但我需要将构建的文件命名为与源代码中不同的名称 我尝试过 orn 但这似乎只能在命令行上工作 不能作为 npm 脚本工作 我特别希望添加跨平台依赖项来完成我的项目 而不是编写
  • 如何通过javascript关闭电子应用程序?

    我正在通过电子运行一个快速应用程序 下面是main js const electron require electron app electron app BrowserWindow electron BrowserWindow let m
  • 如何在 NPM 中通过 package.json 使用 gitlab 存储库

    我正在开展一个内部项目 想在小组内分享一个工具 但如果我使用 npm 工具 它要么请求模块已在 npm 网站或公共 git 存储库上注册 我正在使用 gitlab 并且有一个私人令牌 git https gitlab ci token
  • 无法在单 SPA 应用程序中启动微前端应用程序

    我在尝试在 Single SPA 应用程序中启动子应用程序时遇到错误 基本上 我正在尝试开发一种 util 应用程序 Single SPA 中的子应用程序 其中包含 Sockjs Stomp client 等 我删除了节点模块和 packa

随机推荐

  • CUDA ---- Constant Memory

    CONSTANT MEMORY constant Memory对于device来说只读但是对于host是可读可写 constant Memory和global Memory一样都位于DRAM 并且有一个独立的on chip cache 比直
  • 从CCF一道试题《碰撞的小球》看:面向过程与面向对象编程方式的差异

    题目如下 试题编号 201803 2 试题名称 碰撞的小球 时间限制 1 0s 内存限制 256 0MB 问题描述 问题描述 数轴上有一条长度为L L为偶数 的线段 左端点在原点 右端点在坐标L处 有n个不计体积的小球在线段上 开始时所有的
  • 使用pands.rolling方法实现移动窗口的聚合计算

    一个问题举例 假设有一个5天的收益数据 需要每3天求出一次平均值来达成某个需求 date revenue 2023 05 01 10 2023 05 02 20 2023 05 03 30 2023 05 04 40 2023 05 05
  • 新建服务器步骤

    1 初始化项目 1 1npm init 之后 可以直接敲回车 注意名字 2 创建入口文件 3 安装 express Express 基于 Node js 平台 快速 开放 极简的 Web 开发框架 npm i express 4 在入口文件
  • LocalDateTime相关处理,得到零点以及24点值,最近五分钟点位,与Date互转,时间格式...

    最近一直使用LocalDateTime 老是忘记怎么转换 仅此记录一下 import java time Instant import java time LocalDateTime import java time LocalTime i
  • MySql详细安装教程

    登录https dev mysql com downloads mysql 5 5 html downloads 进入官网下载页面 mysql ZIP Archive是压缩版本 需要自己配置 mysql MSI Installer是安装版本
  • whois命令常见用法

    whois命令常见用法 whois命令简介 安装whois Windows使用whois Linux安装whois whois常见用法 Linux下whois查询域名注册信息 whois命令简介 whois就是一个用来查询域名是否已经被注册
  • ner计算准召的坑

    1 踩了个大坑 记录一下 声明 不喜欢写estimator所以才踩的坑 1 from tensorflow contrib import crf 如果想使用这个函数 tensorflow的版本号要在1 14以下 1 12就可以 不要相信那些
  • python3.8下载及安装步骤详解

    python3 8下载及安装步骤详解 这篇文章主要介绍了python3 8下载及安装步骤详解 本文图文并茂给大家介绍的非常详细 具有一定的参考借鉴价值 需要的朋友可以参考下 1 操作系统 Windows7 64bit Python版本 3
  • 【非Web工程】Spring + C3P0 + Hibernate + Mysql

    工程依赖包 配置文件applicationContext xml
  • egg(一):创建一个egg项目

    前言 企业级node框架egg的运用之路 首先是搭建一个项目 目录 官网入口 点我 具体操作 1 安装nodejs运行环境 支持版本8以上 2 安装egg 二选一 推荐第一个 npm init egg type simple npm ini
  • unity二维数组A*寻路

    public class AStarData public float G 到下一个的距离 public float H 到终点的步数 public float F G H public Vector2 pos 坐标 public ASta
  • Spring中DataIntegrityViolationException异常介绍

    在使用Spring的时候 经常碰到的一个异常是 DataIntegrityViolationExceptio 这个异常是当插入 删除和修改数据的时候 违背的数据完整性约束抛出的异常 例如 主键重复异常等 个人spring cloud开源脚手
  • Nodejs之require加载机制(模块可以污染全局空间)

    Nodejs之require加载机制 模块可以污染全局空间 发表于2013 9 6 17 33 28 16437人阅读 分类 JavaScript Node js 以前就觉得Nodejs的MooTools库很奇怪 因为用他的时候 不需要把r
  • Eclipse远程调试注意事项

    第一部分 springboot远程调试 一 准备条件 1 springboot程序以debug方式启动 2 配置eclipse remote debug参数 二 debug方式启动java application java Xdebug X
  • CSS中隐藏页面元素的几种方式和区别

    前言 在平常的样式排版中 我们经常遇到将某个模块隐藏的场景 通过css隐藏的元素方法有很多种 它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同 这些不同决定了在一些特定场合下使用哪一种方法 实现方法综合 通过css实现隐藏
  • mysql增加数据表的字段(ALTER)

    当需要修改数据表字段或者修改数据表名称时 就需要使用到MySQL ALTER命令 增加一个字段 alter table 表名 add 字段名 类型 值 ALTER TABLE msg ly Add country VARCHAR 20 增加
  • Ubuntu22.04搭建ceph 集群

    Ceph是一个开源的 提供软件定义的 统一的分布式存储系统 设计初衷是提供较好的性能 可靠性和可扩展性 open source distributed reliable scalable unified 统一的 意味着一套存储系统同时提供块
  • 最短路 HDU - 2544(最短路 Flyod模板)

    AC代码 include
  • vue环境搭建(个人学习笔记二)

    目录 友情提醒 第一章 Vue的环境搭建 1 1 什么是node和npm 1 2 node的下载 1 3 配置node的环境变量 1 4 常见的npm命令 1 5 npm设置国内镜像 第二章 脚手架安装 2 1 脚手架安装 2 2 用命令创