Node环境和Vue脚手架的搭建(详细教程)

2022-11-24 0 714

一、Node.js

1.甚么是Node.js?

Node(换句话说 Node.js,二者是同构的)是 JavaScript 的一类运转自然环境。在此之后,他们晓得 JavaScript 都是在应用程序中继续执行的,用于给页面加进各式各样GT5516SBB,所以能说应用程序也是 JavaScript 的运转自然环境。所以这三个运转自然环境有甚么样差别呢?请看右图:

Node环境和Vue脚手架的搭建(详细教程)

具体来说,Node 为他们提供更多了两个无须倚赖应用程序、能间接与作业系统展开交互的 JavaScript 代码运转自然环境!

2.浏览关键步骤:

①浏览。浏览门牌号:https://nodejs.org/en/,可依照计算机系统版、作业系统浏览适宜的版。

Node环境和Vue脚手架的搭建(详细教程)

②加装。holds加装包,点选Next,勾选采用许可证协定,点选Next,优先选择加装边线(可依照对个人情形更改方向。继续点选Next,点选Install,点选Finish完成加装。

Node环境和Vue脚手架的搭建(详细教程)

③加进自然环境变量。进入自然环境变量,编辑【系统变量】下的变量【Path】

Node环境和Vue脚手架的搭建(详细教程)

安装完成后能展开验证:win + r ,输入命令:node -和npm -v(npm),弹出如:v16.14.0,所以就加装成功了,一般来说npm速度相对较慢,继而采用国内的淘宝镜像,加装命令如下:

npm install -g cnpm –registry=https://registry.npm.taobao.org

配置自然环境。现在你全局的仓库是加装在c盘下的,能通过npm list -global命令查看;所以当你们采用npm加装全局模块的时候会加装到c盘下面的文件夹,这会使得你c盘数据庞大,所以他们便能修改默认存储门牌号;但是如果你c盘本身比较大,不在乎多存的这点数据,那就能忽略不计这一步。

在你加装node的文件夹下新建三个文件夹;node_cache(缓存文件夹)node_global(全局仓库文件夹)

3.Node.js的作用

Node.js一发布,立刻在前端工程师中引起了轩然大波,前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。上一次一类技术能被整个前端界如此关注那还是在几年之前,那时候Ajax这个概念刚刚被提出来。让JavaScript跑在server端,这个想法简直太棒了。这下他们不用再去学那些PHP、Ruby、Java、Scala或者其他甚么对前端来说奇怪的语言,也能轻松地将他们的领域扩展到server端,多么美好的前景!

Node.Js的首要目标是提供更多一类简单的、用作创建高性能服务器及可在该服务器中运转的各式各样应用程序的开发工具。

首先让他们来看一下现在的服务器端语言中存在着甚么问题。在Java、PHP或者.NET等服务器语言中,会为每两个客户端连接创建两个新的线程。而每个线程需要耗费大约2MB内存。也就是说,理论上,两个8GB内存的服务器能同时连接的最大用户数为4000个左右。要让web应用程序支持更多的用户,就需要增加服务器的数量,而web应用程序的硬件成本当然就上升了。

Node.Js不为每个客户连接创建两个新的线程,而仅仅采用两个线程。当有用户连接了,就触发两个内部事件,通过非阻塞I/O、事件驱动机制,让Node.js程序宏观上也是并行的。采用Node.js,两个8GB内存的服务器,能同时处理超过4万用户的连接。

二.Vue

1.甚么是Vue?

Vue是两个MVVM的渐进式javascript框架,它是初创项目的首选前端框架。Vue的目标是通过尽可能简单的api实现相应的数据绑定和组合的视图组件。

Vue框架是轻量级的,有很多独立的功能或库,在Vue里他们能依照自己的项目来选用它的一些功能。Vue 的核心库只关注视图层,所以开发者关注的只是m-v的映射关系。

其中提到的“渐进式框架”和“自底向上增量开发的设计”是Vue开发的三个概念。

Vue能在任意其他类型的项目中采用,采用成本较低,更灵活,主张较弱,在Vue的项目中也能轻松融汇其他的技术来开发,并且因为Vue的生态系统特别庞大,能找到基本所有类型的工具在vue项目中采用。

2.Vue钢架构筑

已经加装过node.js之后和淘宝镜像的话,vue的运转自然环境基本上就构筑好了,只需再加装全局的webpack(命令行:npm install webpack -g )和vue-cli钢架工具(在命令行里输入:npm install -g vue-cli )就行了。

Node环境和Vue脚手架的搭建(详细教程)
Node环境和Vue脚手架的搭建(详细教程)

输入 vue init webpack mypro 回车创建项目:

Node环境和Vue脚手架的搭建(详细教程)

进入项目文件夹:cd mypro (cd + vue init webpack mypro 中的项目名字mypro),回车进入项目文件夹:

输入: npm install 初始化,加装倚赖包node_modules

加装完成后输入:npm run dev 运转就行了。

3.Vue的作用

控件自动跟数据绑定,提交表单到后台的时候,能间接采用

页面传值和状态管理

Vue的页面传值可供优先选择的方法非常多,比如采用子组件属性传值,比如采用页面url参数的方法传值,或采用vuex全局状态管理的方法页面传值等等。而原生开发的时,在页面有多个参数的时候,页面传值和初始化要复杂很多。而vue间接将参数保存在对象里面,间接给子组件的属性或vuex存储两个对象就行了。

模块化开发、模块化更新

就像第二点所说的,其实能引申到模块化开发。比如两个列表页面里面有加进功能,有修改功能,这时他们能通过引用子组件的形式,当子组件内容更新的时候,修改主组件的数据,比如修改了一条数据后,他们需要列表页同时刷新,但他们不希望改变原来列表页的页码和搜索条件。假如你用原生开发来实现这个,需要写很多业务逻辑保存上两个页面的搜索条件和页码这些参数,但假如你用vue开发,将变得非常简单。

代码可读性

Vue天生具有组件化开发的能力,因此不同的功能基本都是写在不同的模块里面,代码的可读性非常高。当两个新手接手两个旧项目的时候,基本上能做到一到两天就能定位到要修改的代码,并展开修改。

基于强大的Nodejs,加进新的组件库,基本一句npm命令就能加装。比如当我需要采用axios组件的时候,间接npm install axios加装一下,就能采用axios这个组件。熟悉maven的同学估计很容易就能理解npm工具。

主路由、子路由、主页面、子组件的方式,能让他们彻底抛弃iframe。写过前端的同学都晓得,因为iframe的滚动条、和子页面跟其他页面的可视化性这些原因、用户体验还是远远没有单页面架构友好。而且采用Vue非常简单方便地实现系统菜单、导航等固定布局。

css模块化:各个组件之间,能采用相同的样式名,但有不同的样式属性。比如组件A和组件B的button都绑定了class=”btn”, 但在三个组件里,他们能实现三个不同的btn样式属性,互不影响。

举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务