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

最新推荐文章于 2024-08-06 23:19:14 发布

ArthurSlog

最新推荐文章于 2024-08-06 23:19:14 发布

阅读量2k

点赞数 1

分类专栏：前端 Koa 后端文章标签： Vue Koa 前端前端框架全栈

本文链接：https://blog.csdn.net/u010997452/article/details/81024937

版权

前端同时被 3 个专栏收录

49 篇文章 0 订阅

订阅专栏

Koa

35 篇文章 0 订阅

订阅专栏

后端

28 篇文章 0 订阅

订阅专栏

ArthurSlog
SLog-6
Year·1
Guangzhou·China
July 13th 2018

关注微信公众号“ArthurSlog”

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

开发环境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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>ArthurSlog</title>
    </head>

    <body>
        <div id="app">{{ message }}</div>

        <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello ArthurSlog!'
            }
        })
        </script>
    </body>
</html>

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

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

index.html

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

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

index.html

    <body>
        <div id="app">{{ message }}</div>

        <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello ArthurSlog!'
            }
        })
        </script>
    </body>

index.html

<div id="app">{{ message }}</div>

index.js

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

ArthurSlog

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

谢谢

ArthurSlog

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

开发环境MacOS(High Sierra 10.13.5)

需要的信息：

执行方案

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

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

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

谢谢

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