【Vue学习】- Node.js入门学习

Vue开发 同时被 2 个专栏收录
4 篇文章 0 订阅
33 篇文章 0 订阅

原文地址:https://onestar.newstar.net.cn/blog/58

本文将从Node的介绍、安装、基本使用以及Node的管理工具NPM进行学习

 

 

一、概述

1. 是什么Node.js

   Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行环境。就像java的运行环境jdk,Node.js是JavaScript的运行环境,不需要浏览器,直接使用node.js运行JavaScript代码

2. Node.js优势

  1. Nodejs基于Javascript语言,不用再单独新学一门陌生的语言,从而减低了学习的门槛。同时,Javascript语言在Web前端开发中至 关重要,特别HTML5的应用必须要使用,所以前后台统一语言,不仅可以实现程序员的全栈开发,还可以统一公共类库,代码标准化。单凭这一 点,Nodejs就已经赢得市场的青睐了。
  2. Nodejs并没有重新开发运行时环境,而是选择了目前最快的浏览器内核V8做为执行引擎,保证了Nodejs的性能和稳定性。
  3. Nodejs的开发非常高效,而且代码简单,得意于Nodejs的单线程机制。而Nodejs的另一个特点异步编程,让Nodejs处理IO密集型应用有了明显的优势。个人感觉,用Nodejs比Java做Web开发要高效10倍,比PHP的代码还要简单。
  4. Nodejs的社区在壮大,不仅包的数量在快速增加,而且包的质量也要明显好于其他语言的。很多明星级的包,都是简单而灵巧的,为了开发者的使用习惯而设 计。我最常用到的工具包,如socket.io, moment.js, underscore.js, async.js, express.js, bower.js, grunt.js, forever.js…,确实在改变我以前的编程习惯。

二、Node.js安装

1. 下载

官网:https://nodejs.org/en/

中文网:http://nodejs.cn/

2. 安装查看版本

   命令窗口执行命令,出现版本号则表示安装成功

node -v

3. 使用运行

   既然不用浏览器,那要怎么运行呢,可以在终端命令行运行,命令:node 路径名称,在vscode中,快捷键 Ctrl+ ~ ,可以打开命令行终端,进入目录,执行命令即可

node test.js

三、Node.js包管理工具NPM

1. 什么是NPM

   NPM全称Node Package Manager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Node.js的包管理工具,相当于前端的Maven,对比Maven进行理解:

  • 在后端开发中,使用Maven来构建项目,管理jar包依赖,可以联网下载jar包依赖
  • 在前端开发中,使用NPM来管理项目,管理js依赖,联网下载js依赖,比如JQuery

   安装Node时,npm也会自动安装上,可以使用命令查看:npm -v

#在命令提示符输入 npm -v 可查看当前npm版本
npm -v

2. 使用NPM管理项目

2.1 创建项目文件夹

   使用vscode创建一个文件夹,用来作为项目目录,这里命名为:npmpro

2.2 初始化项目

   [Ctrl + ~]快捷键打开vscode命令行终端,进入项目目录,执行命令初始化:

#初始化命令
npm init

#如果想直接生成 package.json 文件,那么可以使用命令
npm init -y

按照提示一直回车即可,对以下信息做出说明:

  • name: 项目名称
  • version: 项目版本号
  • description: 项目描述
  • keywords: {Array}关键词,便于用户搜索到我们的项目
  • 最后会生成package.json文件,这个是包的配置文件,相当于maven的pom.xml

2.3 修改npm镜像

   NPM官方的管理的包都是从 http://npmjs.com下载的,但是这个网站在国内速度很慢。 这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ,淘宝 NPM 镜像是一个完整 npmjs.com 镜像,同步频率目前为 10分钟一次,以保证尽量与官方服务同步。

#经过下面的配置,以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 

#查看npm配置信息
npm config list

2.4 NPM下载依赖

   使用 npm install 安装依赖包的最新版本,也可以指定下载版本

#下载最新版本JQuery依赖
npm install jquery

#如果安装时想指定特定的版本
npm install jquery@2.1.x

安装后

  • 依赖会安装在项目目录\node_modules
  • 安装会自动在项目目录下添加 package-lock.json文件,这个文件帮助锁定安装包的版本
  • 同时package.json 文件中,依赖包会被添加到dependencies节点下,类似maven中的 <dependencies>

2.5 根据package.json下载依赖

   很多时候,我们只会有package.json文件,这时,就需要根据package.json来下载依赖

#根据package.json下载依赖
npm install

3. NPM其他命令

#当前环境中安装插件
npm install --save-dev eslint
#或
npm install -D eslint

#全局环境安装插件
npm install -g webpack

#更新包(更新到最新版本)
npm update 包名
#全局更新
npm update -g 包名

#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

【点关注,不迷路,欢迎持续关注本站】


image

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<table class="tb-course" style="width:820px;color:#333333;font-family:'Hiragino Sans GB', 'Microsoft Yahei', arial, 宋体, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;font-size:14px;background-color:#ffffff;"> <tbody> <tr> <td style="vertical-align:middle;"> Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。内容包括Vue.js概述、Vue.js的安装、定义页面、渲视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Vuex、页面的生命周期等,*后还给出一个实战案例供读者了解Vue.js项目开发过程。 </td> </tr> </tbody> </table> <div class="intro-course" style="color:#333333;font-family:'Hiragino Sans GB', 'Microsoft Yahei', arial, 宋体, 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;font-size:14px;background-color:#ffffff;"> <p> 2020-2021最新Vue.js零基础入门到精通实战开发课程视频教程下载。课程以项目实战为驱动,帮你打开通往Vue.js的任督二脉,让你迅速成为一个优秀的Vue.js开发人员。 </p> <p> <img style="border:0px;" src="https://www.jsdaima.com/kindeditor/attached/image/20190921/20190921190102_74552.png" alt="2019最新Vue.js零基础入门到精通实战开发" /> </p> <p>   </p> <p> 一、课程介绍<br /> Vue.js致力于构建数据驱动的web应用开发框架,是一个精简的MVVM。Vue.js 专注于 MVVM 模型的 ViewModel 层。简单的数据操作,就可以完成页面的更新,当然也有很多类似的框架,如Angular,React,但是Vue以简洁化,轻量级,数据驱动,模块友好等优势深受企业以及前端开发者的喜爱,成为前端开发人员必备的技能。<br /> 2020年了,你还只会用jQuery吗?本课程以项目实战为驱动,帮你打开通往Vue.js的任督二脉,让你迅速成为一个优秀的Vue.js开发人员。<br /> <br /> 二、课程需知<br /> 我们的课程面向的同学是:需要有网页开发基础,熟悉HTML/CSS/JavaScript等前端开发技术,初步掌握JSON,闭包,AJAX…等JavaScript技术,在进阶阶段的课程中会使用ES6的一些语法,因此事先掌握一些ES6的知识也是有必要的。<br /> <br /> 三、内容编排<br /> 本课程分为三大部分讲解了运用Vue.js 进行项目实战开发。内容包括:<br /> <br /> 第一步:Vue.js基础<br /> 1、初识vue.js <br /> 2、模板语法<br /> 3、计算属性<br /> 4、class与style绑定<br /> 5、条件渲染<br /> 6、列表渲染<br /> 7、fetch&axios<br /> 8、事件处理器<br /> 9、表单控件<br /> 10、组件化开发<br /> <br /> 第二步:Vue.js进阶<br /> 1、过渡动画效果<br /> 2、自定义指令<br /> 3、单文件组件<br /> 4、路由vue-router<br /> <br /> 第三步:项目实战<br /> 1、卖座苹果网站项目<br /> - 引入iconfont<br /> - 路由搭建<br /> - axios以及反向代理<br /> -嵌套路由<br /> -数据渲染<br /> 2、Vue.js第三方框架使用<br /> -Element UI<br /> -mintUI<br /> 3、状态管理vuex<br /> <br /> 课程详细目录:<br /> Vue.js 课程介绍.docx<br /> 第001集-1vue初识<br /> 第002集-2条件渲染<br /> 第003集-3tab切换<br /> 第004集-4列表渲染<br /> 第005集-5模板语法<br /> 第006集-6计算属性<br /> 第007集-7侦听器和class<br /> 第008集-8内联样式<br /> 第009集-9事件绑定<br /> 第010集-10表单输入绑定<br /> 第011集-11过渡动画<br /> 第012集-12todolist应用<br /> 第013集-13生命周期与组件生命周期<br /> 第014集-14组件之间的传值<br /> 第015集-15$root_$parent_$children<br /> 第016集-16v-model与插槽<br /> 第017集-17vue-cli<br /> 第018集-18vue-devtools<br /> 第019集-19vue-cli原理<br /> 第020集-20vue组件化<br /> 第021集-21vue聊天框<br /> 第022集-22socket初识和安装<br /> 第023集-23单聊和群聊以及命名空间<br /> 第024集-24聊天项目<br /> 第025集-25聊天登录登出<br /> 第026集-26聊天列表<br /> 第027集-27个人聊天<br /> 第028集-28单聊功能<br /> 第029集-29自动滚动和聊天<br /> 第030集-30群聊<br /> 第031集-31注意编译地址<br /> 第032集-32vue实现原理1<br /> 第033集-33vue实现原理2<br /> 第034集-34less<br /> 第035集-35vue-less使用<br /> 第036集-36sass<br /> 第037集-37vue-router<br /> 第038集-38动态路由和嵌套路由<br /> 第039集-39命名视图和组件传参<br /> 第040集-40vue路由高级应用<br /> 第041集-41Vue路由守卫<br /> 第042集-42vuexstate<br /> 第043集-43vuex getter<br /> 第044集-44vuex-action<br /> 第045集-45vuex-module<br /> 第046集-46vuex-插件<br /> 第047集-47vuex-vant<br /> 第048集-48网易严选商城<br /> 第049集-49网易商城首页<br /> 第050集-50分类列表<br /> 第051集-51产品列表<br /> 第052集-52产品列表2<br /> 第053集-53商品产品页面<br /> 第054集-54产品sku<br /> 第055集-55产品购物车<br /> 第056集-56购物车 </p> </div>
相关推荐
<p> <span style="font-size:18px;"><strong>为什么要学习服务端渲染 nuxt.js ?</strong></span><strong><span style="font-size:18px;"></span></strong> </p> <p> <span style="font-size:18px;"><span style="font-size:14px;">现在我们的项目大多数都是SPA(单页面应用),在实际开发过程中单页面应用比之前的模板渲染要好很多,首先单页面应用是前后端分离,架构清晰,前端负责交互逻辑,后端负责数据,前后端单独开发,独立测试。但是,SPA不利于SEO(搜索引擎优化)。让搜索引擎更为信任该网站,通过提升排名获得更多网站流量,对于某些类型的网站是非常有必要的。目前大部分的Vue项目本质是 SPA 应用,React、Angular也都是SPA应用。SPA应用广泛用于对SEO要求不高的场景中。在我们开发的过程中,我们有 SEO 的需求,我们需要搜索引擎更多地抓取到我们的项目内容,此时我们需要SSR。SSR保证用户尽快看到基本的内容,也使得用户体验性更好。</span><span style="font-size:14px;"></span><br /> </span> </p> <p style="text-align:center;"> <span style="font-size:18px;"><span style="font-size:14px;"><img src="https://img-bss.csdn.net/201908180620316714.png" alt="" /><br /> </span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;">Nuxt.js 是一个 Node 程序,基于vue.js开发的一套服务端渲染的框架,必须使用 Node 环境。我们对 Nuxt.js 应用的访问,实际上是在访问这个 Node.js 程序的路由,程序输出首屏渲染内容 + 用以重新渲染的 SPA 的脚本代码,而路由是由 Nuxt.js 约定好的 pages 文件夹生成的,开发只需要遵循一定的约定,直接使用vue.js开发我们项目也是非常轻松的。<br /> </span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><br /> </span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong>课程案例</strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:14px;"><span style="font-size:14px;"><span style="font-size:14px;"><strong>(1) HOME PAGE</strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><img src="https://img-bss.csdn.net/201908180621374702.png" alt="" /><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong>(2) Jokes Page </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><img src="https://img-bss.csdn.net/201908180622012095.png" alt="" /><img src="https://img-bss.csdn.net/201908180622206132.png" alt="" /><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong>(3)About Page </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><img src="https://img-bss.csdn.net/201908180623185478.png" alt="" /><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><br /> </strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><span style="font-size:18px;"><strong><br /> </strong></span></strong></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><span style="font-size:14px;"></span><span style="font-size:18px;"><strong>课程概述</strong></span></strong></span></span></span> </p> <p style="text-align:left;"> <span><span><span><span><span style="font-size:14px;">在本课程中,大喵将使用 nuxt.js + bootstrapVue + json-server 开发实战性质一个入门级项目,带着大家来体验服务端渲染(SSR )项目构建的过程;介绍 nuxt.js项目目录的结构,每个文件夹和文件的基本概念和作用,以及nuxt.config.js 配置文件的基本介绍;页面公共结构处理,路由页面跳转配置处理;axios 接口请求;带着大家来熟悉及掌握 bootstrapVue UI组件库的使用;</span><span style="font-size:14px;"></span></span></span></span></span> </p> <p style="text-align:left;"> <span style="font-size:18px;"><span style="font-size:14px;"><span style="font-size:18px;"><strong><br /> </strong></span></span></span> </p>
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值