Vue与Node介绍，两者可分可合，安装node

目录

Vue介绍

传统的JavaScript

Nodejs搭配Vue

Nodejs的作用

什么是 NPM

为什么要使用 NPM

npm方法安装vue

配置淘宝镜像

别人node项目如何运行

自己搭建Nodejs环境

创建服务端

安装express

写后端启动文件 app.js

打包并部署

小总结

Vue搭配其他后端语言

---

Vue介绍

vue是许多的js框架中，我们可以只使用vue+nodejs进行项目开发，，也可以使用vue搭配后端语言进行项目开发。

首先介绍前一种nodejs开发

nodejs是一个服务js平台，有npm，grunt、express等强大的代码与项目管理应用。还有webpack，v8等强大的功能。

传统的JavaScript

传统的js是运行在浏览器上的，因为浏览器内核分为两个部分:

1. 渲染引擎---渲染HTML和CSS,
2. JavaScript 引擎---负责运行 JavaScript, Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快且性能好。

Nodejs搭配Vue

服务端,使用nodejs搭配express 框架配合搭建提供一个API服务，以及服务端渲染,客户端则选择 vuejs 开发前端页面，vue-router做路由，vuex做状态管理 , axios 做ajax请求

Nodejs的作用

Node.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎。我们知道 Apache + PHP 以及 Java 的 Servlet 都可以用来开发动态网页，Node.js 的作用与他们类似，只不过是使用 JavaScript 来开发，它大大提升了开发的性能以及便利。使用node开发还可以使用配套的npm包管理工具：

什么是 NPM

npm 基于 Node.js ，就像 pip 基于 Python， gem 基于 Ruby， pear 基于 PHP 。

npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制。npm 提供了命令行工具，使你可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包。

为什么要使用 NPM

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

• 允许用户从 npm 服务器下载别人编写的第三方包到本地使用。
• 允许用户从 npm 服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到 npm 服务器供别人使用。

npm 的背后，是基于 couchdb 的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。

 

首先我们介绍一下nodejs可以实现什么

1. 工具类应用：过去依赖ava威其他语言构建的前端工具类应用，纷紛被一些前端工程师用Node重写
2. 游戏开发领域：网易开源了Pomelo框架，Pomelo是基于Nodejs的高性能、分布式游戏服务器框架
3. 云计算平台提供Node支持：微软将Node引入Azure的开发中；阿里云、百度均纷纷在云服务器上提供Node应用托管服务
4. 并行/0使得使用者可以更高效地利用分布式环境：阿里巴巴；eBay
5. 高性能I/0用于实时应用：VoxerNode应用在实时语音上；腾讯的朋友网将Node应用在长连接中；花湿网。胸蔚街等公司通过socket io实现实时通知的功能
6. 新型物联网开发框架：目前流行的新型物联网框架有；lotjs. Duktape. tessel. Threejs. icoolpy. johnny；five. linkit等等 ，且绝大部分新型物联网开发框架不约而同的选择了node.js 平台为核心。
7. 即时通讯：tcp；websocket
8. 爬虫
9. 开发各种类型的动态网站：企业网站；商城；聊天室；直播；大量用户表单收集；微值公众平台；金融类型网站
10. 为各种APP提供AP接口

下面介绍nodejs的安装

• 首先使用中文官网下载http://nodejs.cn/download/

选择64为下载全程下一步即可

• 配置环境（全局环境变量，nod环境变量）
• 全局环境变量
• 配置node的环境变量

检查版本

node -v 

npm -v

npm方法安装vue

1.安装vue: cnpm install vue

2.全局安装vue-cli: cnpm install -g vue-cli

配置淘宝镜像

1. 永久使用淘宝镜像

npm config set registry https://registry.npm.taobao.org

这样配置以后都是用淘宝的镜像下载资源 国内的访问速度会比较快

1. 直接安装使用

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

以后使用cnpm 代替npm

别人node项目如何运行

使用别人的node环境是首先删除node_modules

其次使用npm安装环境

npm install

然后使用npm运行环境

npm run dev

或者

npm run start

或者

npm run serve

具体运行需要查看main.js所调用的依赖

打包(请事先调用依赖)

npm run bulid

自己搭建Nodejs环境

服务端,使用nodejs搭配express 框架配合搭建提供一个API服务，以及服务端渲染,客户端则选择 vuejs 开发前端页面，vue-router做路由，vuex做状态管理 , axios 做ajax请求

创建服务端

mkdir server
cd server/
touch app.js

安装express

npm install express --save
npm install body-parser --save

写后端启动文件 app.js

var express = require('express');
var fs = require('fs');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 访问静态资源
app.use(express.static(path.resolve(__dirname, '../dist')));
// 访问单页
app.get('*', function (req, res) {
var html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8');
 res.send(html);
});
// 监听
app.listen(8081, function () {
  console.log('success listen...8080');
});

打包并部署

npm run build
node server/app.js

我们在本地调试的时候只要命令行执行npm run dev就可以把这个项目跑起来，但是现在我们要把他放到服务器上的话用npm run build命令

在浏览器输入 http://127.0.0.1:8080/ 或者http://localhost/ 就能看到页面了

这里推荐使用hbuilderX创建项目

小总结

nodejs注重的是服务器端，可以说他就是一个可以与前端交互的后端语言

---

Vue搭配其他后端语言

首先

1.我们可以直接使用<script src="https://unpkg.com/vue/dist/vue.js"></script>引用

2.下载在本地后应用（推荐）

语法参考菜鸟教程中https://www.runoob.com/vue2/vue-tutorial.html