(1)node功能

准确的说是使用vue-cli 脚手架搭建项目的时候需要nodejs。也可以用script标签引入vue.min.js这样的,在js里实例化vue也行。

使用node有几件事,打包部署,解析vue单文件组件,解析每个vue模块,拼在一起,转码es6,less,等,启动测试服务器localhost8080, 帮助管理 vue-router,vue-resource这些插件,直接拿来用。

也就这些好处,这都是所谓前端工程化,也是前端发展趋势,掌握这些东西也能提升身价。

(2)webpack

webpack能够把.vue后缀名的文件打包成浏览器能够识别的js,而这个.vue文件装换需要打包器vue-loader→npm下载→node包管理工具

Vue.js可以在html里引用,使用npm引入是方便包管理。等到应用需要的库和框架多起来后,一个个从html里引入就不方便了。所以用到打包工具比如webpack,可以直接require引入之后将不同模块打包成单个js文件。同时这些工具提供各种自动化处理,让前端开发更爽。最后Vue.js是数据驱动,和JQuery思路不同,你几乎不需要自己进行复杂低效的dom操作,开发简介明了。

(3)关系梳理

webpack能够把.vue后缀名的文件打包成浏览器能够识别的js,而这个.vue文件装换需要打包器vue-loader

这个vue-loader打包器是可以从npm上面下载(npm上面有很多资源包),npm下载文件之后,webpack打包文件的时需要node环境去运行

.

vue与node和npm关系的更多相关文章

  1. vue,webpack,node间的关系

    针对在“思否”上看到的关于vue,node,webpack的一些问题及回复,做出如下的整理,给同样不是很清楚的朋友做了解,也供自己学习 原链接:https://segmentfault.com/q/1 ...

  2. webpack、node、npm关系

    webpack模块打包 webpack为了正常运行, 必须依赖node环境, node环境为了可以正常的执行很多代码,必须其中包含各种依赖的包 npm工具(node packages manager) ...

  3. 【vue】Mac上安装Node和NPM

    http://bubkoo.com/2017/01/08/quick-tip-multiple-versions-node-nvm/ 作为前端开发者,node和npm安装必不可少.然而有时会因为安装新 ...

  4. Mac 安装node npm cnpm vue 以及卸载 node 和 npm 的方法 清空npm缓存的方法

    S01 安装node(内含npm) 首先,到官网下载长期支持版,截止目前,最新的长期支持版本号是10.16.3 https://nodejs.org/zh-cn/download/ 下载完毕后,安装该 ...

  5. 014 Vue学习笔记1----Vue及Node、NPM

    1.前端开发模式的发展过程 (1)静态页面 最初的网页以HTML为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通.开发人员也只关心页面的样式和内容即可. (2)异步刷新,操作DO ...

  6. Node.js npm基础安装配置&创建第一个VUE项目

    使用之前,我们先来明白这几个东西是用来干什么的. node.js: 一种javascript的运行环境,能够使得javascript脱离浏览器运行.Node.js的出现,使得前后端使用同一种语言,统一 ...

  7. Node.js npm

    Node程序包管理器(NPM)提供了以下两个主要功能: 在线存储库的Node.js包/模块,可搜索 search.nodejs.org 命令行实用程序来安装Node.js的包,做版本管理和Node.j ...

  8. node.js NPM 使用

    n=NPM是一个Node包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准.有了NPM,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包.npms安装: 下载npm源 ...

  9. Vue.js 运行环境搭建详解(基于windows的手把手安装教学)及vue、node基础知识普及

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架——只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

随机推荐

  1. css3 实现png图片改变背景颜色

    实际上是用的是就是css的filter的drop-shadow属性 drop-shadow: 1 不支持内阴影 2 不支持多阴影 3 兼容性 ie13+  谷歌 火狐   android4.4+  i ...

  2. ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道

    ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 03. 服务注册和管道 语雀: https://www.yuque.com/yuejiangliu/dotnet/ ...

  3. vim的visual可视模式(转载)

    转自:http://www.cnblogs.com/chenyadong/archive/2011/08/30/2159809.html 为了便于选取文本,VIM 引入了可视(Visual)模式.要选 ...

  4. HDU6031:Innumerable Ancestors(二分+倍增数组)

    传送门 题意 n个点的图,有n-1条无向边,m个询问,每次询问 给出两个集合a和b,找到a的一个元素x,b的一个元素y,使得x和y的lca深度最大 分析 这道题如果直接暴力做,复杂度为O(mk1k2* ...

  5. 第四篇 .NET高级技术之结构体及值类型引用类型

    结构体 在平时的开发中很少自己去写结构体,他是一种值类型的数据.对于结构,不像类那样存在继承,一个结构体不能从另一个结构或类继承.但是结构体从基类Object继承. 语法: //struct是定义结构 ...

  6. 语句 if

    1.if语句单项分支 #单项分支 if 55 < 133: print('这个比较运算是正确的') #输出结果:这个比较运算是正确的 2.if语句双项分支 #双项分支 if 55 > 14 ...

  7. ubuntu 18 安装virtulenv以及virtualenvwrapper

    转自: https://www.jianshu.com/p/06533f19c4ad 首先安装pip,如果用的python3版本要安装pip3(自行google) sudo apt install v ...

  8. python实现基数排序

    # 基数排序有着局限性,只能是整数,# 排序的时候要先排后面一个条件的(多条件排序)#如本例中,先从个位开始排起# 多关键字排序# 从低关键字开始排序 # @File: radix_sort #### ...

  9. [洛谷p2858] 奶牛零食

    题目链接: 点我 题目分析: 这是什么,区间dp吗?怎么大佬都在说区间dp的样子 完蛋区间dp都不知道是啥quq 于是使用了玄学的姿势A过了这道题 设dp[i][j][0]表示第i天,左边选了j个,当 ...

  10. Codeforces Round #418 (Div. 2) B

    Description Sengoku still remembers the mysterious "colourful meteoroids" she discovered w ...