Vue与Node介绍,两者可分可合,安装node
目录Nodejs搭配Vuenpm方法安装vue配置淘宝镜像如何运行node项目Vue搭配其他后端语言vue是许多的js框架中,我们可以只使用vue+nodejs进行项目开发,,也可以使用vue搭配后端语言进行项目开发。首先介绍前一种nodejs开发nodejs是一个服务js平台,有npm,grunt、express等强大的代码与项目管理应用。还有webpack,v8等强大的功能。传统的JavaSc
目录
Vue介绍
vue是许多的js框架中,我们可以只使用vue+nodejs进行项目开发,,也可以使用vue搭配后端语言进行项目开发。
首先介绍前一种nodejs开发
nodejs是一个服务js平台,有npm,grunt、express等强大的代码与项目管理应用。还有webpack,v8等强大的功能。
传统的JavaScript
传统的js是运行在浏览器上的,因为浏览器内核分为两个部分:
- 渲染引擎---渲染HTML和CSS,
- 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可以实现什么
- 工具类应用:过去依赖ava威其他语言构建的前端工具类应用,纷紛被一些前端工程师用Node重写
- 游戏开发领域:网易开源了Pomelo框架,Pomelo是基于Nodejs的高性能、分布式游戏服务器框架
- 云计算平台提供Node支持:微软将Node引入Azure的开发中;阿里云、百度均纷纷在云服务器上提供Node应用托管服务
- 并行/0使得使用者可以更高效地利用分布式环境:阿里巴巴;eBay
- 高性能I/0用于实时应用:VoxerNode应用在实时语音上;腾讯的朋友网将Node应用在长连接中;花湿网。胸蔚街等公司通过socket io实现实时通知的功能
- 新型物联网开发框架:目前流行的新型物联网框架有;lotjs. Duktape. tessel. Threejs. icoolpy. johnny;five. linkit等等 ,且绝大部分新型物联网开发框架不约而同的选择了node.js 平台为核心。
- 即时通讯:tcp;websocket
- 爬虫
- 开发各种类型的动态网站:企业网站;商城;聊天室;直播;大量用户表单收集;微值公众平台;金融类型网站
- 为各种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
配置淘宝镜像
- 永久使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
这样配置以后都是用淘宝的镜像下载资源 国内的访问速度会比较快
- 直接安装使用
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.下载在本地后应用(推荐)
更多推荐
所有评论(0)