Vue高级操作

node.js和npm介绍(理解)

node.js介绍:

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

Node.js很适合搭建轻量的服务器（应用），所以它又被人称为服务器语言，前端中的后端语言。

node翻译过来是节点的意思，而node.js后面特地带了.js，就表示它与JavaScript有莫大的关系。

总结:Nodejs前端的框架,他的作用不是开发前端代码,而是提供一个平台,用途让其他前端框架运行在平台.
比如:Vue框架,webpack框架都可以运行在nodejs平台上了

npm介绍:

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

1.允许用户从NPM服务器下载别人编写的第三方包到本地使用。

2.允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

3.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

npm则是包含在node.js里面的一个包管理工具，就如同linux中的yum仓库，rpm包管理；

而这些包管理工具都是予以使用的人们方便，同时解决各种包依赖之间的关系的。 等下面演示后，就会知道有npm去解决项目及包之间的依赖关系是多么的便利，省去了人手上的多少心力。让开发人员专注于代码上。

既然npm是包管理工具，那么它自己也和node.js分开自成一个网站，在npm的网站上面，就如同github，其仓库中保管了N多的开源项目，有世界上众多开发者提供的项目。我们只需要在npm的网站上搜索相关的就可以找到，然后在线上下载也行，直接在自己的项目中使用命令行安装也行。

安装与配置

安装

node.js官网下载地址:

https://nodejs.org/en/download/

注意: 下载时不同的操作系统,需要下载对应的安装文件

其实安装完node.js后就已经将npm也安装上了。不过若是想要单独更新npm时怎么办？ 可以使用以下两个命令进行更新： npm install npm@latest -g ,npm install npm@next -g

常用命令说明:

在dos命令行窗口(win+r, 输入cmd 打开dos命令行窗口)

1.查看当前安装的node.js版本:node - v (注意node和-v有空格)

2.查看当前安装npm的版本:npm -v

3.查询当前操作系统配置的环境变量:path

配置npm

作用: 配置npm仓库地址为国内网站地址, 提高访问速度.

npm config get registry 
作用:查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org 
作用:设置成淘宝镜像

npm config get registry 

作用:再获取查看,结果是修改后的https://registry.npm.taobao.org/ 

Vue-cli脚手架

介绍:

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

Vue 提供了一个官方的 CLI，我们就叫它为脚手架。它为现代前端工作流提供了 batteries-included 的构建设置，只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。简单的说，就是我们使用vue-cli可以快速构建一个完整的vue项目，直接可以运行的vue本地项目，我们在此基础之上直接开发我们所需要的功能和代码即可。

vue-cli就是Vue的脚手架工具，和我们工地看到的脚手架真是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

搭建脚手架命令:

#安装vue-cli脚手架---可能比较慢,要等几分钟
npm install vue-cli -g 
#卸载vue-cli脚手架 --- 大可不必
npm uninstall vue-cli -g 
#查看版本,下面命令如果不好用, 请使用: vue --version
vue –V 
#vue安装在哪里
where vue 

脚手架创建vue项目

 创建vue项目操作步骤:

步骤一: 创建一个目录(保存生成的文件,专业名词为工作空间workspaces)

比如: E:/workspaces/vue

备注: 至少在D盘的根目录下面创建一个目录,多个也没关系

步骤二: 打开dos命令窗口,切换到D:/workspaces/vue

输入如下两个命令:

命令一: E: (指的系统的盘符,写自己的)

命令二: cd /workspaces/vue(写自己的目录)

备注: cd 和后面的路径中间要有空格

步骤三: 继续在dos命令行输入如下命令,创建vue项目

vue init webpack jt01

备注:

1. vue init webpack 三个单词要有空格,且是固定命令名称

2. jt01是自定义项目名称,不能使用大写

步骤四: 启动(关闭)Vue项目,在dos命令窗口输入如下命令

第一步命令: E: (指的系统盘符)

第二步命令: cd E:/workspaces/vue/jt01

第三步启动命令: npm run dev

备注:

1.启动项目了,我们就可以访问

2.关闭项目服务,就不能访问了.(ctrl+c 关闭服务,稍等片刻)

步骤五: 测试, 在浏览器地址栏输入,如下地址

http://localhost:8080/

备注:

1.http 协议(访问网站都用用或者https)

2.localhost是域名(类似与百度)

3.8080是端口(区分不同的服务)

注意:

jt01 为自定义的 项目名称

产生项目webpack模板，目录100+m，可见内容多复杂，庞大

会自动生成node_modules临时目录，可以删除，每次编译、运行会自动产生