Slog6_使用vue前端框架实现单页应用(SPA)

FingerLiu 发布于2019-08-26 12:19 / 1478人阅读

摘要：时间时间时间每一份有限的时间里都饱含无限的价值需要非常珍惜开发环境需要的信息官方手册，一款工具，具体内容请移步官方手册官方手册，一刻代码包管理工具，具体内容请移步官方手册官方安装手册，前端框架浏览器扩展，用于调试应用程序，下一篇进行详细介

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

const serve = require("koa-static");
const Koa = require("koa");
const app = new Koa();

// $ GET /package.json
app.use(serve("."));

app.listen(3000);

console.log("listening on port 3000");

index.html



    
    
    
    
    ArthurSlog
    

    
        {{ message }}

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

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

在 index.html 里，引入 vue框架：

index.html

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

index.html

    
        {{ message }}

index.html

{{ message }}

index.html

new Vue({
    el: "#app",
    data: {
        message: "Hello ArthurSlog!"
    }
})

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

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

node index.js

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

Hello ArthurSlog!

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

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

欢迎关注我的微信公众号 ArthurSlog

如果你喜欢我的文章欢迎点赞留言 谢谢

云服务器 GPU云服务器单页应用单页应用cdn 单页应用程序 VUE实现webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108487.html

Slog31_支配vue框架初阶项目之博客网站-注册页面-风格

摘要：掘金主页简书主页迟到太久就不必到了开发环境需要的信息和信息源如何使用与进行数据交互使用后端框架实现静态服务器使用前端框架实现单页应用前端部分统计页面计算属性和侦听器主页注册界面条件渲染登陆界面后台用户管理的界面列表渲染用户界面调查问 ArthurSlog SLog-31 Year·1 Guangzhou·China Aug 6th 2018 showImg(https://segm...

Jochen 2019-08-29 16:35 评论0 收藏0
Slog27_支配vue框架初阶项目之博客网站-样式居中

摘要：掘金主页简书主页没有写够足够的代码量，想成为高手是不可能的，只能纸上谈兵，但写够了代码量，纸上谈兵的也是大有人在开发环境需要的信息和信息源如何使用与进行数据交互使用后端框架实现静态服务器使用前端框架实现单页应用前端部分统计页面计算属性和 ArthurSlog SLog-27 Year·1 Guangzhou·China July 30th 2018 showImg(https://...

Karrdy 2019-08-29 16:33 评论0 收藏0
Slog27_支配vue框架初阶项目之博客网站-样式居中

摘要：掘金主页简书主页没有写够足够的代码量，想成为高手是不可能的，只能纸上谈兵，但写够了代码量，纸上谈兵的也是大有人在开发环境需要的信息和信息源如何使用与进行数据交互使用后端框架实现静态服务器使用前端框架实现单页应用前端部分统计页面计算属性和 ArthurSlog SLog-27 Year·1 Guangzhou·China July 30th 2018 showImg(https://...

appetizerio 2019-08-02 11:23 评论0 收藏0
微前端 —— 理论篇

摘要：现在开始从头搭建我们的微前端架构。项目源码微前端项目微前端微前端项目 1. 微前端基于spa类的单页应用，随着企业工程项目的体积越来越大，开发的功能越来越多，页面也越来越多，项目随之也变得越来越臃肿，维护起来十分困难，往往改一个logo，或者改一个小样式，都要将项目全部重新打包一遍，维护困难，部署也困难。因此前端在借鉴后端的微服务架构模式后，衍生了...

wangbinke 2019-08-26 10:32 评论0 收藏0