百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程字典 > 正文

Vue脚手架(基础+Node.js安装)(vue脚手架安装步骤)

toyiye 2024-08-22 02:35 4 浏览 0 评论

关于Vue

  1. Vue.js(读音:/vju?/, 类似于:view) 是一套构建用户界面的渐进式框
  2. Vue.js的官方网址是:https://cn.vuejs.org/index.html

传统的前端开发框架大多是基于DOMDocument Object Model:文档 对象模型)的,在操作时,需要关心被操作的页面元素,甚至这些页面元 素的层级结构,核心思想是:先根据DOM找到对应的页面元素,然后再 进行相关操作,例如设计其样式,或配置某个事件

Vue则是将必要的页面元素的相关属性例如页面元素的样式、控件的值、 页面元素的事件等)与数据进行绑定,当实现绑定后,就不再需要关心页 面元素本身了,只需要关心各个数据即可,从而避免了大量繁琐的DOM 操作,也实现了页面设计与数据处理的分离

关于Vue CLI

  • Vue CLI通常称为“VUE脚手架”,它是一个专门为单页面应用快速搭建 繁杂的脚手架,它可以轻松地创建新的应用程序而且可用于自动生成vue 和webpack的工程模板
  • Vue CLI相关文档的官方网址是:https://cli.vuejs.org/zh/guide/
  • Vue CLI是由VUE提供的一个官方客户端(client),专门为单页面应用 快速搭建繁杂的脚手架

所谓的单页面:指的是在工程中,理论上只有1个HTML页面,只不过这 个页面的所有内容都是可以动态更新的,你随时可以使用新的页面内容替 换原有的内容,并且,你还可以使得URL一并更新,从用户体验上来说, 这种单页面应用与传统的前端应用并没有什么不同

【注意】在使用传统模式开发的前端工程中,各个页面是相对独立的, 甚至你可以在本地硬盘上找到对应的html文件并双击直接打开它,而Vue CLI工程与一个Web应用程序一样,是需要启动服务才可以访问的,一定 程度上,它的上手难度会更大一些,但是在中大型应用程序的开发中,它 在开发效率、管理和维护成本上有更大的优势

单页面应用的工程中需要一定的配置,对配置文件的位置也有一定的要求, 整体工程结果并不像传统的前端应用工程那么自由,所以,手动创建这种 应用的成本较大,而Vue CLI则可以自动生成vue.js + webpack的工程模 板,是为现代前端工作流提供了Batteries-included(自含全套工具集) 的构建设置,只需要几分钟的时间甚至更短的时间就可以运行起来

Vue CLI创建的工程,默认即是热部署的,当你启动了这个工程(非打包后提供工程)的服务后,在绝大部分情况下, 修改源代码后并不需要重新启动服务,即可体验到修改后的内容

关于npm

npm的全称是:Node Package Manager,可译为“Node包管理器”

在早期没有npm时,如果需要在前端工程中使用某些框架(例如jQuery、 Bootstrap等),需要找到相关的官网或资源站点,要么下载这些框架的 文件,要么使用cdn在线引用这些文件,其过程相对烦琐,因为这些框架 的具体表现可能不只是一个文件,如果下载,只能下载打包后的文件并自 行解压缩,如果在线引用,则需要自行添加多条源代码进行引用,同时, 是这些框架也是在不停维护和更新的,即使开发人员在本地已经下载过这 些框架文件,当需要新版本的框架时,又需要重新下载,或者上网搜索最 新的cdn引用地址。

为了解决这个问题,Isaac Z.Schlueter使用运行在Node. js之上的 JavaScript语言开发了npm,它允许配置一个仓库,并将大量框架的文件放在了npm仓库中,并提供了一系列的管理命令,最终,开发人员只需 要使用npm的命令,就可以在线获取到框架文件。通常,框架的文件会自 动的存储到工程目录下,并在工程的配置文件中进行注册,开发人员只需 要在主配置中进行导入及一些简单的配置就可以开始使用这些框架。

【注】一定程度上,npm与Maven或Gradle是比较相似

安装Node.js

  1. 为了使用npm,首先需要下载Node.js安装包,下载地址可参考:–> https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
  2. Node.js的安装过程没有特别的注意事项,整个安装过程中都可以不必修改任何内容,直至其自动安装完成
  • 此安装包会自动配置环境变量,安装完成后,可检查npm命令是否可用, 在操作系统的命令提示符下执行以下命令即可:
//查看node.js安装的版本
npm -V
//执行以上命令后,将会显示版本号,如下:
C:\>npm -v  8.5.0
//注意: 这个命令必须在新的命令提示窗口(安装完Node.js后再打开窗口)运行此命令

配置npm源

nmp源(即npm仓库,称之为:registry)默认是境外服务器,在国内使用时,访问速度较慢,通常,在初次使用时,应该将npm源更换为国内的服务器地址,例如使用https://registry.npm.taobao.org作为npm源

//配置npm源的命令如下:
npm config set registry https://registry.npm.taobao.org
//当配置成功后,可以通过get命令查看npm源
npm config get registry
//运行查看之后 显示:
https://registry.npm.taobao.org

【注意】无论你使用哪种操作系统,必须保证当前登录的用户具有最高访问权限,例如,在Windows操作系统中,请使用管理员模式的命令提示符, 在Mac OS中,请使用sudo来执行以上命令。

安装Vue CLI

//安装Vue CLI的命令如下
npm install -g @vue/cli
//-g表示全局安装,则当前操作系统中所有用户均可使用,且自动配置Vue环境变量。
//此过程将从仓库服务器中下载Vue CLI,通常耗时30秒至5分钟左右。 
//提示:如果安装过程中的日志提示更新npm版本,或提示某些软件版本偏 旧等,均可无视。 
//注意:以上操作仍需要管理权限才可以成功执行。

//通过以下命令检验Vue CLI是否安装成功:
vue -V
//执行后显示如下:
@vue/cli 5.0.3

学习记录,如有侵权请联系删除。

相关推荐

# Python 3 # Python 3字典Dictionary(1)

Python3字典字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号({})中,格式如...

Python第八课:数据类型中的字典及其函数与方法

Python3字典字典是另一种可变容器模型,且可存储任意类型对象。字典的每个键值...

Python中字典详解(python 中字典)

字典是Python中使用键进行索引的重要数据结构。它们是无序的项序列(键值对),这意味着顺序不被保留。键是不可变的。与列表一样,字典的值可以保存异构数据,即整数、浮点、字符串、NaN、布尔值、列表、数...

Python3.9又更新了:dict内置新功能,正式版十月见面

机器之心报道参与:一鸣、JaminPython3.8的热乎劲还没过去,Python就又双叒叕要更新了。近日,3.9版本的第四个alpha版已经开源。从文档中,我们可以看到官方透露的对dic...

Python3 基本数据类型详解(python三种基本数据类型)

文章来源:加米谷大数据Python中的变量不需要声明。每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建。在Python中,变量就是变量,它没有类型,我们所说的"类型"是变...

一文掌握Python的字典(python字典用法大全)

字典是Python中最强大、最灵活的内置数据结构之一。它们允许存储键值对,从而实现高效的数据检索、操作和组织。本文深入探讨了字典,涵盖了它们的创建、操作和高级用法,以帮助中级Python开发...

超级完整|Python字典详解(python字典的方法或操作)

一、字典概述01字典的格式Python字典是一种可变容器模型,且可存储任意类型对象,如字符串、数字、元组等其他容器模型。字典的每个键值key=>value对用冒号:分割,每个对之间用逗号,...

Python3.9版本新特性:字典合并操作的详细解读

处于测试阶段的Python3.9版本中有一个新特性:我们在使用Python字典时,将能够编写出更可读、更紧凑的代码啦!Python版本你现在使用哪种版本的Python?3.7分?3.5分?还是2.7...

python 自学,字典3(一些例子)(python字典有哪些基本操作)

例子11;如何批量复制字典里的内容2;如何批量修改字典的内容3;如何批量修改字典里某些指定的内容...

Python3.9中的字典合并和更新,几乎影响了所有Python程序员

全文共2837字,预计学习时长9分钟Python3.9正在积极开发,并计划于今年10月发布。2月26日,开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符,这个新特性几乎...

Python3大字典:《Python3自学速查手册.pdf》限时下载中

最近有人会想了,2022了,想学Python晚不晚,学习python有前途吗?IT行业行业薪资高,发展前景好,是很多求职群里严重的香饽饽,而要进入这个高薪行业,也不是那么轻而易举的,拿信工专业的大学生...

python学习——字典(python字典基本操作)

字典Python的字典数据类型是基于hash散列算法实现的,采用键值对(key:value)的形式,根据key的值计算value的地址,具有非常快的查取和插入速度。但它是无序的,包含的元素个数不限,值...

324页清华教授撰写【Python 3 菜鸟查询手册】火了,小白入门字典

如何入门学习python...

Python3.9中的字典合并和更新,了解一下

全文共2837字,预计学习时长9分钟Python3.9正在积极开发,并计划于今年10月发布。2月26日,开发团队发布了alpha4版本。该版本引入了新的合并(|)和更新(|=)运算符,这个新特性几乎...

python3基础之字典(python中字典的基本操作)

字典和列表一样,也是python内置的一种数据结构。字典的结构如下图:列表用中括号[]把元素包起来,而字典是用大括号{}把元素包起来,只不过字典的每一个元素都包含键和值两部分。键和值是一一对应的...

取消回复欢迎 发表评论:

请填写验证码