Slog6_使用vue前端框架實現單頁應用(SPA)

FingerLiu 發布于2019-08-26 12:19 / 1540人閱讀

摘要：時間時間時間每一份有限的時間里都飽含無限的價值需要非常珍惜開發環境需要的信息官方手冊，一款工具，具體內容請移步官方手冊官方手冊，一刻代碼包管理工具，具體內容請移步官方手冊官方安裝手冊，前端框架瀏覽器擴展，用于調試應用程序，下一篇進行詳細介

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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