【前端系列】vue

这里写目录标题

  • 一、Vue简介
    • 1.1 主流前端框架/库简介
  • 二、下载和安装Vue
    • 2.1 下载
    • 2.2 安装完成后，检查
    • 2.3创建全局安装目录和缓存日志目录
    • 2.4 为了下载包快速，改源为淘宝镜像
    • 2.5 查看npm配置修改是否成功
  • 三、配置环境变量
    • 环境变量—用户变量—选中Path—点编辑
    • 环境变量—系统变量—新建
  • 四 安装vue
    • 4.1 安装vue
    • 4.2 安装webpack模板
    • 安装脚手架vue-cli
    • 如果安装新版本vue，先卸载旧版本：
  • 五、创建一个vue项目

一、Vue简介

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

1.1 主流前端框架/库简介

目前的流行前端框架/库有：Vue、React、Angular（三大霸主）以及Bootstrap、APICloud、jQuery等；（jQuery、React为库）

Vue 毫无疑问是当前最流行最火爆的前端框架之一。vue作为渐进式前端框架，由当时的谷歌工程师尤雨溪大神业余时间所写，一放到github就引起流行，github上点赞数百万。vue现在几乎作为前端必备框架，特点高效，灵活，稳定，功能强大，代码少，运行速度快，整个文件只有200多K。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。vue做了必须的事，又不会做职责之外的事。做为前端，不懂vue是不行了。

React是Facebook在2013年开源的前端框架，由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。也就是说同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。开发效率高，事半功倍。

AngularJS诞生于2009年，由Misko Hevery 等人创建，是为了克服HTML在构建应用上的不足而设计的。后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。2016年angular2正式被发布，在Anguar2.0之前的版本都叫做AngularJS（Angular2不是从Angular1升级过来的，Angular2是重写的）。

jQuery是一个快速、简洁的JavaScript库，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。代码十分精炼，代码量小，速度快，犀利。使用量非常大。

Bootstrap（react是Facebook开发的，那么做为Facebook的竞争对手，Twitter公司也不甘示弱，开源了Bootstrap。）是由美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。Bootstrap 能给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。

apicloud（包括api.js和api.css）专门为移动端APP开发而设计的框架，适应不同的移动设备，而且可以和其他框架一起引入项目中使用，非常灵活，优秀。

二、下载和安装Vue

2.1 下载

官网下载地址Download | Node.js

在这里插入图片描述
选择适合自己的版本，推荐LTS，长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

下载好后，双击下载的安装包。

2.2 安装完成后，检查

打开cmd，输入如下指令。

node -v
npm -v

在这里插入图片描述

输出了版本号就说明安装成功了

2.3创建全局安装目录和缓存日志目录

在我们的安装目录下，创建名为node_cache和node_global的两个文件夹。
在这里插入图片描述
打开Dos窗口，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix “你的安装目录\node_global”npm config set cache “你的安装目录\node_cache”

2.4 为了下载包快速，改源为淘宝镜像

（这里修改了，我们就不需要安装cnpm了，因为cnpm就是**Node.js淘宝镜像加速器，**这里配置了就不需要安装了）

注：npm config set registry https://registry.npm.taobao.org 2021 废弃了


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

2.5 查看npm配置修改是否成功

npm config list

在这里插入图片描述

三、配置环境变量

在安装过程中，自动配置了两个环境变量一个是环境变量—用户变量—Path里面的
C:\Users\你的用户名\AppData\Roaming\npm
另一个是环境变量—系统变量—
Path里面的软件安装目录，我们需要增加和修改一下。

环境变量—用户变量—选中Path—点编辑

在这里插入图片描述

将 C:\Users\你的用户名\AppData\Roaming\npm 修改为 你的安装目录\node_global

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

环境变量—系统变量—新建

变量名：NODE_PATH

变量值：你的安装目录\node_global\node_modules

注：这里的node_modules目录是还没有的，但是我们等会把模块安装到全局目录下就会自动生成这个文件夹。
在这里插入图片描述

记得在系统变量—Path添加上%NODE_PATH%
在这里插入图片描述

四 安装vue

4.1 安装vue

npm install vue -g

其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。
Win + s 搜索 “命令提示符”，右键以管理员身份运行cmd。

问题解决

如果有权限问题
右击Nodejs文件夹->属性->安全，点击编辑，将所有权限都✔即可
在这里插入图片描述
在这里插入图片描述

4.2 安装webpack模板

npm install webpack -g

此外，在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli
在这里插入图片描述

npm install webpack-cli -g

在这里插入图片描述
如果不显示版本号，显示不是内部指令，关闭 cmd 重新打开即可！　　
在这里插入图片描述

输入vue --version，能输出版本号就说明安装好了。

安装脚手架vue-cli

npm install -g @vue/cli (3.0版本)
npm install vue-cli -g （2.0版本）

如果安装新版本vue，先卸载旧版本：

npm uninstall vue-cli -g
npm install -g @vue/cli
npm install -g @vue/cli-init

npm install vue-cli -g

输入vue --version，能输出版本号就说明安装好了。
在这里插入图片描述

##　安装vue-router

npm install vue-router -g

五、创建一个vue项目

在这里插入图片描述

根据自己的需求来操作。

项目名是？回车
项目描述？回车
作者？回车
是否安装编译器 回车
是否安装vue-router y 回车
是否使用ESLint做代码检查 n 回车
是否安装单元测试工具 n 回车
单元测试相关 n 回车
创建完成后直接初始化 n 回车

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

进程间通信 ---＞信号灯

进程间通信 ---＞信号灯

有名信号量: 1.创建 semget int semget(key_t key, int nsems, int semflg); 功能: 创建一组信号量 参数: key:IPC对象名 nsems:信号量的个数 semflg:IPC_CREAT 返回值: …
阅读更多...
Vue+SpringBoot打造实验报告管理系统

Vue+SpringBoot打造实验报告管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验管理模块2.2 实验实例模块2.3 实验批阅模块2.4 实验咨询模块 三、系统展示四、核心代码4.1 查询实验4.2 新增实验咨询4.3 回复实验咨询4.4 新增实验实例4.5 查询实验实例 五、免责说明 一、摘要 1.1 项目介绍 基于…
阅读更多...
【学习笔记】卫星基础知识

【学习笔记】卫星基础知识

一、什么是卫星以及它如何工作？ 通信卫星是一种人造卫星，通过使用转发器在源和接收器之间中继和放大无线电电信信号。卫星的工作原理是接收从地球发送的无线电信号并将无线电信号重新发送回地球。卫星使用从大型太阳能电池阵列收集的太阳能，…
阅读更多...
Java面试题【必知必会】基础（2024）

Java面试题【必知必会】基础（2024）

近期一直在准备面试，所以为了巩固知识，也为了梳理，整理了一些java的基础面试题！同时也希望各位英雄和女侠能够补充！不胜荣幸！！！ 1. Final 有什么用？ final 的意思是最后…
阅读更多...
HTML标签分类，web微信开发者工具

HTML标签分类，web微信开发者工具

第一个阶段，开发环境和工具准备 浏览器 （Google，FireFox，…）下载，安装前端开发工具vscode，下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境下载、配置PHP和MyS…
阅读更多...
计算机常用的单位以及换算

计算机常用的单位以及换算

通常买电脑时候，或者手机的时候，通常会问多大内存？ 但是实际你了解内存如何换算吗？ 内存可以是1G，2G，4G，等等 首先注意，单位不区分大小写，所以1GB 1Gb 1gB都是相同的。…
阅读更多...
Centos安装Jenkins

Centos安装Jenkins

1、更新系统 （1）更新下系统 sudo yum -y update 安装用于下载java 17二进制文件的wget命令行工具 sudo yum -y install wget vim 2、卸载centos自带的jdk 由于我们安装的版本比较高，需要jdk17，卸载centos自带的jdk。用 下面的…
阅读更多...
软件为什么要做软件测试

软件为什么要做软件测试

软件要做测试的原因在于以下几个关键点： 发现和修复错误：软件测试的首要目的是识别并修复代码中的错误、缺陷或漏洞。这些错误可能导致程序崩溃、数据丢失、功能异常等，影响软件的正常运行。 保证质量与可靠性：通过系统性的测试活…
阅读更多...
【vue/组件封装】封装一个带条件筛选的搜索框组件（多组条件思路、可多选）详细流程

【vue/组件封装】封装一个带条件筛选的搜索框组件（多组条件思路、可多选）详细流程

引入：实现一个带有筛选功能的搜索框，封装成组件； 搜索框长这样子： 点击右侧筛选图标后弹出层，长这样子： 实际应用中有多组筛选条件，这里为了举栗子就展示一组； 预览：…
阅读更多...
POST 请求,Ajax 与 cookie

POST 请求,Ajax 与 cookie

POST 请求则需要设置RequestHeader告诉后台传递内容的编码方式以及在 send 方法里传入对应的值 xhr.open("POST", url, true); xhr.setRequestHeader(("Content-Type": "application/x-www-form-urlencoded")); xhr.send("key1value1&…
阅读更多...
07-prometheus的自定义监控-pushgateway工具组件

07-prometheus的自定义监控-pushgateway工具组件

一、概述 pushgateway用于自定义监控节点、节点中服务的工具，用户可以通过自定义的命令获取数据，并将数据推送给pushgateway中； prometheus服务，从pushgateway中获取监控数据； 二、部署pushgateway 我们可以“随便”找…
阅读更多...
微服务高性能通信技术-gRPC实战落地

微服务高性能通信技术-gRPC实战落地

在微服务架构中，服务之间的通信是至关重要的。为了实现高性能、低延迟和跨语言的服务间通信，gRPC是一个流行的选择。gRPC是一个开源的、高性能的、通用的RPC（远程过程调用）框架，基于HTTP/2协议和Protocol Buffers序列化…
阅读更多...
Pytorch学习 day03（Tensorboard、Transforms）

Pytorch学习 day03（Tensorboard、Transforms）

Tensorboard Tensorboard能够可视化loss的变化过程，便于我们查看模型的训练状态，也能查看模型当前的输入和输出结果 在Pycharm中，可以通过按住ctrl，并左键点击某个库来进入源文件查看该库的使用方法SummaryWriter是用来向log_dir…
阅读更多...
文件上传到oss上以及下载

文件上传到oss上以及下载

<template><!-- 批量渠道变更 --><div><div style"margin-bottom: 10px; display: flex;"><Download name"下载模板" type"Url" url"https://file.wonder-link.net/%E6%89%B9%E9%87%8F%E6%B8%A0%E9%81%93%E5%8F…
阅读更多...
140 Linux 系统编程17 ，进程组，会话，创建会话，守护进程

140 Linux 系统编程17 ，进程组，会话，创建会话，守护进程

1. 进程组&#xff0c;也称之为作业。代表一个或多个进程的集合。 每个进程都属于一个进程组。在waitpid函数和kill函数的参数中都曾使用到。操作系统设计的进程组的概念&#xff0c;是为了简化对多个进程的管理。 当父进程&#xff0c;创建子进程的时候&#xff0c;默认子进程…
阅读更多...
【数据结构】顺序表+链表

【数据结构】顺序表+链表

目录 1.顺序表 1.1初始化顺序表 1.2销毁顺序表 1.3检查容量并扩容 1.4把某个元素插入到下标为pos的位置 1.5头插和尾插 1.6删除下标为pos的元素 1.7头删和尾删 2.顺序表的问题及思考 3.链表 3.1链表的访问 3.2链表的增删查改 1.顺序表 顺序表的本质其实就是一个数组…
阅读更多...
Tensorflow2.0笔记 - 计算梯度

Tensorflow2.0笔记 - 计算梯度

本笔记主要记录tf.GradientTape和tf.gradient的用法 import tensorflow as tf import numpy as nptf.__version__#要计算梯度的所有参数计算过程必须放到gradient tape中 #with tf.GradientTape as tape: w tf.constant(1.) x tf.constant(2.)with tf.GradientTape() as tap…
阅读更多...
惯性导航 | 测量方程中的噪声模型与离散时间噪声模型

惯性导航 | 测量方程中的噪声模型与离散时间噪声模型

惯性导航 | 测量方程中的噪声模型与离散时间噪声模型 IMU测量方程中的噪声模型IMU的离散时间噪声模型 IMU测量方程中的噪声模型 在大多数系统中&#xff0c;IMU的噪声由两部分组成&#xff1a;测量噪声&#xff08;Measurement Nosie&#xff09;与零偏&#xff08;Bias&#…
阅读更多...
1.1_3 性能指标——时延、时延带宽积、往返时间RTT、利用率

1.1_3 性能指标——时延、时延带宽积、往返时间RTT、利用率

文章目录 1.1_3 性能指标——时延、时延带宽积、往返时间RTT、利用率&#xff08;一&#xff09;时延&#xff08;二&#xff09;时延带宽积&#xff08;三&#xff09;往返时延RTT&#xff08;四&#xff09;利用率 1.1_3 性能指标——时延、时延带宽积、往返时间RTT、利用率 …
阅读更多...
wireshark抓取localhost(127.0.0.1)数据包

wireshark抓取localhost(127.0.0.1)数据包

打开wireshark中&#xff0c;在"capture"菜单中&#xff0c;选择"interfaces"子菜单&#xff0c;在列出的接口中选中"Adapter for loopback traffic capture"即可。 必须安装了Npcap才有此选项&#xff0c;否则需要重新安装wireshark。 抓包截图…
阅读更多...
最新文章

Copyright @ 2022~2023