使用vue前端框架实现单页应用

ArthurSlog

SLog-6

Year·1

Guangzhou·China

July 13th 2018

时间 时间 时间 每一份有限的时间里 都饱含无限的价值 需要非常珍惜

开发环境MacOS(High Sierra 10.13.5)

需要的信息:

brew官方手册,一款MacOS工具,具体内容请移步官方手册

npm官方手册,一刻nodejs代码包管理工具,具体内容请移步官方手册

vue官方安装手册,前端框架

chrome浏览器devtools扩展,用于调试Vue.js应用程序,下一篇进行详细介绍和应用,本篇先自己花一分钟做个了解

vue快速使用手册,可以先花20分钟的时间写一写感受一下vue的写法

执行方案

切换至桌面路径

cd ~/Desktop

创建一个新文件夹

mkdir node_vue_learningload

切换至新建的文件夹路径下

cd node_vue_learningload

使用npm指令初始化nodejs项目环境,一路回车,完成初始化

npm init

安装 koa 和 kao-static

sudo npm install koa koa-static

需要管理员权限,输入密码

在当前路径下创建 index.js 和 index.html 这两个文件

index.js

index.html

分析一下上面的两份文件代码:

在 index.js 里,引入 koa 框架和 koa-static 中间件实现了一个 静态web服务器,静态路由至当前路径下的 index.html

在 index.html 里,引入 vue框架:

index.html

在 index.html 里,vue.js 使用简洁的模板语法来声明式地将数据渲染进DOM的系统:

index.html

index.html

index.js

Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的

现在启动由 koa框架 和 koa-static中间件 搭建的静态web服务器

node index.js

现在打开浏览器,在地址栏输入静态web服务器的地址 127.0.0.1:3000 ,可以看到页面显示

至此,我们使用 vue框架 实现了一个单页应用

下一节,会介绍 后端框架koa 搭配 前端框架vue,实现前后端的衔接

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180714G0AMSM00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券