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

二叶草 2020年3月9日20:21:14前端框架评论阅读模式
  • ArthurSlog

  • SLog-6

  • Year·1

  • Guangzhou·China

  • July 13th 2018

使用vue前端框架实现单页应用(SPA)
微信扫描二维码,关注我的公众号

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

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

constserve = require('koa-static');
constKoa = require('koa');
constapp = newKoa();

// $ GET /package.json

app.use(serve('.'));
app.listen(3000);

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

index.html

<!DOCTYPE html>
<html>
   <head>
   <metacharset="utf-8">
   <!-- 开发环境版本,包含了有帮助的命令行警告 -->
   <scriptsrc="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>

分析一下上面的两份文件代码:
  1. 在 index.js 里,引入 koa 框架和 koa-static 中间件实现了一个 静态web服务器,静态路由至当前路径下的 index.html

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

index.html

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

  1. 在 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!'

    }

})

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

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

node index.js

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

Hello ArthurSlog!

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

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

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

使用vue前端框架实现单页应用(SPA)
微信扫描二维码,关注我的公众号

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

谢谢

本文来源于:使用vue前端框架实现单页应用(SPA)-变化吧门户
特别声明:以上文章内容仅代表作者本人观点,不代表变化吧门户观点或立场。如有关于作品内容、版权或其它问题请于作品发表后的30日内与变化吧联系。

  • 赞助本站
  • 微信扫一扫
  • weinxin
  • 加入Q群
  • QQ扫一扫
  • weinxin
二叶草
Go语言接口规则 前端框架

Go语言接口规则

Go语言接口规则 接口是一个或多个方法签名的集合。任何类型的方法集中只要拥有该接口对应的全部方法签名。就表示它 "实现" 了该接口,无须在该类型上显式声明实现了哪个接口。对应方法,是指有相同名称、参数...
Go语言中处理 HTTP 服务器 前端框架

Go语言中处理 HTTP 服务器

1 概述 包 net/http 提供了HTTP服务器端和客户端的实现。本文说明关于服务器端的部分。 快速开始: package main import (   "log"   "net/http" )...

发表评论