node.js是什么
- 简单的说 Node.js 就是运行在服务端的 JavaScript。
- Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
- Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
node的安装
下载地址:http://nodejs.cn/
安装:这里安装的是Windows7,64位的
node-v8.11.4-x64.msi安装步骤,双击下载下来的安装文件,按提示填写安装路径,然后就是一路的next,直到最后的installed,然后就是完成
检查是否安装成功
cmd 打开命令窗口输入 path检查安装的时候时候自动给你添加上环境配置
然后继续输入node -v 检查node的版本号
然后就是检查npm的版本号,这是node的安装的时候,自带安装的一个管理工具
至此安装完成如图下所示
npm介绍
- NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功
- npm -v
安装cnpm
由于npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以建议使用npm的国内镜像---cnpm
-
下载:在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org
webpack
-
webpack是什么
- 可以看做是模块打包机:它做的事情是,分析你的项目结构,找到 JavaScript 模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript 等),并将其转换和打包为合适的格式供浏览器使用
或者是:webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js 文件、css 文件等)都看成模块,通过 loader(加载器)和 plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。
举个例子,很多人开发了各种优秀的 JavaScript 模块或组件,我们不想重复发明轮子,而是想直接利用别人的模块,就是类似 require 或 include 这样的机制,把别人的模块引入进来,但是 JavaScript 又没有 类或包 这样的概念,那应该如何做呢?
如何去引入别人的模块?引入之后保证各种依赖关系不出错?这就是 webpack 要解决的问题。
模块化的概念我们理解了,那如何理解 打包 这个词呢? 其实,模块化的问题解决之后,webpack 就能把各种资源模块打包合并成一个文件输出给浏览器。在打包的过程中还能对这些资源进行处理,比如压缩减少体积,把 sass 编译成 css, coffee 编译成 js。所以它在某些程度上,跟grunt/gulp 的功能有些相同
与 grunt/gulp 的区别:虽然都是前端自动化构建工具,但看他们的定位就知道不是对等的。grunt/gulp 严格上讲,模块化不是他强调的东西,他旨在规范前端开发流程。webpack 更是明显强调模块化开发,而那些文件压缩合并、预处理等功能,不过是他附带的功能。
打个比方,如果你的工程模块依赖很简单,不需要把 js 或各种资源打包,只需要简单的合并、压缩,那就不需要 webpack。grunt/gulp 就够用了。反过来,如果你的工程庞大,页面中使用了很多库(SPA很容易出现这种情况),那就可以选择使用 webpack,因为这样既能做到模块化管理,也能做到 grunt/gulp 的一些功能,比如压缩,转化coffeescript 为 js 等。
webpack下载
- 安装vue-cli
- vue-cli是什么
- vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。
- 安装 :cnpm install vue-cli -g
补充
-
这里检查webpack的时候没有显示他的版本号,说明没有安装成功。
是因为webpack 4.X 开始,需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack webpack-cli -g 来安装,安装成功后先检查webpack的版本号,就能正常显示出来了
这里应该是学习vue前端框架的一些关于环境和工具的安装使用教程总结。既是对自己学习的记录,也是希望对你有用!
在学习的过程中查看的一些网上资料,链接如下
- https://blog.csdn.net/wulala_hei/article/details/80488674
- https://blog.csdn.net/wypersist/article/details/80492576
- https://blog.csdn.net/WYpersist/article/details/80496259
- http://www.runoob.com/nodejs/nodejs-tutorial.html
- https://blog.csdn.net/helloxiaoliang/article/details/78436364
- https://www.webpackjs.com/