【前端系列】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 回车

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

字符指针数组指针的理解

字符指针数组指针的理解

1.字符指针：也就是存放字符地址的指针（和整型指针差不多） 代码如下： int main() {char ch w;char *pc &ch;*pc w;return 0; } 2.数组指针：也就是指向数组的指针 2.1数组指针如何初始化 int main() {int ar…
阅读更多...
学习大数据，所必需的java基础（8）

学习大数据，所必需的java基础（8）

文章目录 字符缓冲流字符缓冲输出流 _Buffered和Writer字符缓冲输入流字符缓冲流练习 转换流字符编码字符集转换流转换流_OutputStreamWriter序列流和反序列流的介绍序列化流_ObjectOutputStream反序列化_ObjectInputStream不想被序列化操作反序列化时出现的问题以及分析和解决…
阅读更多...
低代码平台，面向业务or技术？

低代码平台，面向业务or技术？

低代码开发平台是一种新兴的技术趋势，它为企业提供了快速、高效地开发应用程序的方法。随着数字化转型的加速，越来越多的企业开始关注低代码开发平台，并在实际应用中取得了一定的成果。 作为使用者来说，面对市场上形形色色的低代…
阅读更多...
力扣hot100：438.找到字符串中所有字母异位词（滑动窗口）

力扣hot100：438.找到字符串中所有字母异位词（滑动窗口）

26个字符，我复制怎么了？26个字符我比较个数怎么了？ 顶多时间复杂度*26 本题用固定窗口大小的滑动窗口每次比较包含26个元素的数组次数，最容易写。 动态窗口大小哈希表存数值（双指针差值）难想难写。 一、动态…
阅读更多...
【随笔】yt-dlp使用cookie完成身份认证 python yt-dlp库常用参数

【随笔】yt-dlp使用cookie完成身份认证 python yt-dlp库常用参数

文章目录 一、提取cookies1.1 不提取出来1.2 提取为单独文件1.2 使用cookies 二、yt-dlp 用法（python库）基本参数视频参数播放列表参数高级参数 以前用yt-dlp做的软件： 但是部分网站需要在登录状态才能获取更高格式的内容。 比如&#xff…
阅读更多...
dolphinscheduler试用（一）（边用边修bug。。。。create tenant error）

dolphinscheduler试用（一）（边用边修bug。。。。create tenant error）

（作者：陈玓玏） 前提：部署好了dolphinscheduler，部署篇见https://blog.csdn.net/weixin_39750084/article/details/136306890?spm1001.2014.3001.5501 官方文档见：https://dolphinscheduler.apache.org/…
阅读更多...
数据结构(二)——线性表

数据结构(二)——线性表

二、线性表 2.1线性表的定义和基本操作 2.1.1 线性表的基本概念 线性表：是具有相同数据类型的 n 个数据元素的有限序列。(Eg:所有的整数按递增次序排列，不是顺序表，因为所有的整数是无限的)其中n为表长，当n0时线性表是一个空表…
阅读更多...
将ppt里的视频导出来

将ppt里的视频导出来

将ppt的后缀从pptx改为zip 找到【media】里面有存放图片和音频以及视频，看文件名后缀可以找到，mp4的即为视频，直接复制粘贴到桌面即可。 关闭压缩软件把ppt后缀改回，不影响ppt正常使用。
阅读更多...
2023年全球AI服务器市场占有率

2023年全球AI服务器市场占有率

关注卢松松，会经常给你分享一些我的经验和观点。 AI服务器是高端产品，全球都缺高端AI芯片，最近集邦咨询发布了2023 年全球 AI 服务器市场占有率的市场报告。 排名第一的是浪潮，第二名是戴尔、第三名是HPE(慧与也跟惠普有关)、第…
阅读更多...
各种业务场景调用API代理的API接口教程

各种业务场景调用API代理的API接口教程

API代理的API接口在各种业务场景中具有广泛的应用，本文将介绍哪些业务场景可以使用API代理的API接口，并提供详细的调用教程和代码演示，同时，我们还将讨论在不同场景下使用API代理的API接口所带来的好处。 哪些业务场景可以使用API…
阅读更多...
Qt ini配置文件

Qt ini配置文件

ini文件用于保存用户的设置操作，下列以背景颜色设置为例子 暂时默认设置为白色背景 这段代码放置在主窗口的构造函数中，用于初始化读取ini文件 QString color;QSettings *set new QSettings("color.ini",QSettings::IniFormat);set->begi…
阅读更多...
泰迪智能科技-2024年高校大数据人才培养探索模式

泰迪智能科技-2024年高校大数据人才培养探索模式

随着数字经济的高速发展，对于大数据人才的需求日益增长。产业数字化和数字产业化之间的关系，已经成为推动社会发展的关键。为此，高校及产业界需要紧密配合，以培养出符合时代需求的大数据人才。 数字产业化与产业数字化高速发…
阅读更多...
C++_程序流程结构_跳转语句_break

C++_程序流程结构_跳转语句_break

break 作用 用于跳出选择结构或循环结构 break使用的时机 出现在switch条件语句中，作用是终止case并跳出switch出现在循环语句中，作用是跳出当前的循环语句出现在嵌套循环中，跳出最近的内层循环语句 示例1 示例2 示例3
阅读更多...
入门指南：使用uni-app构建跨平台应用

入门指南：使用uni-app构建跨平台应用

入门指南：使用uni-app构建跨平台应用 🌟 前言 欢迎来到我的小天地，这里是我记录技术点滴、分享学习心得的地方。📚 🛠️ 技能清单 编程语言：Java、C、C、Python、Go前端技术：Jquery、Vue.js、R…
阅读更多...
【MySQL】数据库的操作（1）

【MySQL】数据库的操作（1）

【MySQL】数据库的操作（1） 目录 【MySQL】数据库的操作（1）创建数据库数据库的编码集和校验集查看系统默认字符集以及校验规则查看数据库支持的字符集查看数据库支持的字符集校验规则校验规则对数据库的影响数据库的删除 数据库的备…
阅读更多...
【Leetcode每日一题】 前缀和 - 和为 K 的子数组（难度⭐）（29）

【Leetcode每日一题】 前缀和 - 和为 K 的子数组（难度⭐）（29）

1. 题目解析 题目链接：560. 和为 K 的子数组 这个问题的理解其实相当简单，只需看一下示例，基本就能明白其含义了。 核心在于计算题目所给数组是否存在连续子数组和为指定值，存在返回连续子数组个数即可，不存在返回0即…
阅读更多...
C++基础2：C++基本数据类型和控制结构

C++基础2：C++基本数据类型和控制结构

此专栏为移动机器人知识体系下的编程语言中的 C {\rm C} C从入门到深入的专栏，参考书籍：《深入浅出 C {\rm C} C》(马晓锐)和《从 C {\rm C} C到 C {\rm C} C精通面向对象编程》(曾凡锋等)。 2.C基本数据类型和控制结构 2.1 C基本数据类型 程序是由算法…
阅读更多...
HarmonyOS NEXT应用开发——Navigation开发 页面切换场景范例

HarmonyOS NEXT应用开发——Navigation开发 页面切换场景范例

简介 在应用开发时，我们常常遇到，需要在应用内多页面跳转场景时中使用Navigation导航组件做统一的页面跳转管理，它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。除此之外还拥有动态加载，navPathSta…
阅读更多...
2024年最新Android大厂面试笔试题分享，大厂面试题汇总

2024年最新Android大厂面试笔试题分享，大厂面试题汇总

随着互联网的发展，大众对程序员这个职业有了更多的了解，除了高薪工资之外，压力太大，黑白颠倒，作息不规律等等，也是身为一个程序员必须经历的事情。 大部分程序员都是安静的、稳重的，有什么问题…
阅读更多...
算法简单试题

算法简单试题

一、选择题 01.一个算法应该是( B ). A.程序 B.问题求解步骤的描述 C.要满足五个基本特性 D.A和C 02．某算法的时间复杂度为O(n)，则表示该…
阅读更多...
最新文章

Copyright @ 2022~2023