关于Vue
- Vue.js(读音:/vjuː/, 类似于:view) 是一套构建用户界面的渐进式框
- Vue.js的官方网址是:https://cn.vuejs.org/index.HTML
传统的前端开发框架大多是基于DOM(Document 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
- 为了使用npm,首先需要下载node.js安装包,下载地址可参考:–> https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
- Node.js的安装过程没有特别的注意事项,整个安装过程中都可以不必修改任何内容,直至其自动安装完成
安装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
学习记录,如有侵权请联系删除。
,