成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Slog6_使用vue前端框架實(shí)現(xiàn)單頁(yè)應(yīng)用(SPA)

FingerLiu / 1554人閱讀

摘要：時(shí)間時(shí)間時(shí)間每一份有限的時(shí)間里都飽含無(wú)限的價(jià)值需要非常珍惜開(kāi)發(fā)環(huán)境需要的信息官方手冊(cè)，一款工具，具體內(nèi)容請(qǐng)移步官方手冊(cè)官方手冊(cè)，一刻代碼包管理工具，具體內(nèi)容請(qǐng)移步官方手冊(cè)官方安裝手冊(cè)，前端框架瀏覽器擴(kuò)展，用于調(diào)試應(yīng)用程序，下一篇進(jìn)行詳細(xì)介

ArthurSlog

SLog-6

Year·1

Guangzhou·China

July 13th 2018

時(shí)間 時(shí)間 時(shí)間 每一份有限的時(shí)間里 都飽含無(wú)限的價(jià)值 需要非常珍惜

開(kāi)發(fā)環(huán)境MacOS(High Sierra 10.13.5) 需要的信息：

brew官方手冊(cè)，一款MacOS工具，具體內(nèi)容請(qǐng)移步官方手冊(cè)

npm官方手冊(cè)，一刻nodejs代碼包管理工具，具體內(nèi)容請(qǐng)移步官方手冊(cè)

vue官方安裝手冊(cè)，前端框架

chrome瀏覽器devtools擴(kuò)展，用于調(diào)試Vue.js應(yīng)用程序，下一篇進(jìn)行詳細(xì)介紹和應(yīng)用，本篇先自己花一分鐘做個(gè)了解

vue快速使用手冊(cè)，可以先花20分鐘的時(shí)間寫(xiě)一寫(xiě)感受一下vue的寫(xiě)法

執(zhí)行方案

切換至桌面路徑

cd ~/Desktop

創(chuàng)建一個(gè)新文件夾

mkdir node_vue_learningload

切換至新建的文件夾路徑下

cd node_vue_learningload

使用npm指令初始化nodejs項(xiàng)目環(huán)境，一路回車，完成初始化

npm init

安裝 koa 和 kao-static

sudo npm install koa koa-static

需要管理員權(quán)限，輸入密碼

在當(dāng)前路徑下創(chuàng)建 index.js 和 index.html 這兩個(gè)文件

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 中間件實(shí)現(xiàn)了一個(gè) 靜態(tài)web服務(wù)器，靜態(tài)路由至當(dāng)前路徑下的 index.html

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

index.html

在 index.html 里，vue.js 使用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式地將數(shù)據(jù)渲染進(jìn)DOM的系統(tǒng)：

index.html

    
        
{{ message }}

index.html

{{ message }}

index.html

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

Vue 在背后做了大量工作。現(xiàn)在數(shù)據(jù)和 DOM 已經(jīng)被建立了關(guān)聯(lián)，所有東西都是響應(yīng)式的

現(xiàn)在啟動(dòng)由 koa框架 和 koa-static中間件 搭建的靜態(tài)web服務(wù)器

node index.js

現(xiàn)在打開(kāi)瀏覽器，在地址欄輸入靜態(tài)web服務(wù)器的地址 127.0.0.1:3000 ，可以看到頁(yè)面顯示

Hello ArthurSlog!

至此，我們使用 vue框架 實(shí)現(xiàn)了一個(gè)單頁(yè)應(yīng)用

下一節(jié)，會(huì)介紹 后端框架koa 搭配 前端框架vue，實(shí)現(xiàn)前后端的銜接

歡迎關(guān)注我的微信公眾號(hào) ArthurSlog

如果你喜歡我的文章 歡迎點(diǎn)贊 留言 謝謝

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108487.html

相關(guān)文章

  • Slog31_支配vue框架初階項(xiàng)目之博客網(wǎng)站-注冊(cè)頁(yè)面-風(fēng)格

    摘要：掘金主頁(yè)簡(jiǎn)書(shū)主頁(yè)遲到太久就不必到了開(kāi)發(fā)環(huán)境需要的信息和信息源如何使用與進(jìn)行數(shù)據(jù)交互使用后端框架實(shí)現(xiàn)靜態(tài)服務(wù)器使用前端框架實(shí)現(xiàn)單頁(yè)應(yīng)用前端部分統(tǒng)計(jì)頁(yè)面計(jì)算屬性和偵聽(tīng)器主頁(yè)注冊(cè)界面條件渲染登陸界面后臺(tái)用戶管理的界面列表渲染用戶界面調(diào)查問(wèn) ArthurSlog SLog-31 Year·1 Guangzhou·China Aug 6th 2018 showImg(https://segm...

    Jochen 評(píng)論0 收藏0

  • Slog27_支配vue框架初階項(xiàng)目之博客網(wǎng)站-樣式居中

    摘要：掘金主頁(yè)簡(jiǎn)書(shū)主頁(yè)沒(méi)有寫(xiě)夠足夠的代碼量，想成為高手是不可能的，只能紙上談兵，但寫(xiě)夠了代碼量，紙上談兵的也是大有人在開(kāi)發(fā)環(huán)境需要的信息和信息源如何使用與進(jìn)行數(shù)據(jù)交互使用后端框架實(shí)現(xiàn)靜態(tài)服務(wù)器使用前端框架實(shí)現(xiàn)單頁(yè)應(yīng)用前端部分統(tǒng)計(jì)頁(yè)面計(jì)算屬性和 ArthurSlog SLog-27 Year·1 Guangzhou·China July 30th 2018 showImg(https://...

    Karrdy 評(píng)論0 收藏0

  • Slog27_支配vue框架初階項(xiàng)目之博客網(wǎng)站-樣式居中

    摘要：掘金主頁(yè)簡(jiǎn)書(shū)主頁(yè)沒(méi)有寫(xiě)夠足夠的代碼量，想成為高手是不可能的，只能紙上談兵，但寫(xiě)夠了代碼量，紙上談兵的也是大有人在開(kāi)發(fā)環(huán)境需要的信息和信息源如何使用與進(jìn)行數(shù)據(jù)交互使用后端框架實(shí)現(xiàn)靜態(tài)服務(wù)器使用前端框架實(shí)現(xiàn)單頁(yè)應(yīng)用前端部分統(tǒng)計(jì)頁(yè)面計(jì)算屬性和 ArthurSlog SLog-27 Year·1 Guangzhou·China July 30th 2018 showImg(https://...

    appetizerio 評(píng)論0 收藏0

  • 微前端 —— 理論篇

    摘要：現(xiàn)在開(kāi)始從頭搭建我們的微前端架構(gòu)。項(xiàng)目源碼微前端項(xiàng)目微前端微前端項(xiàng)目 1. 微前端 ????????基于spa類的單頁(yè)應(yīng)用，隨著企業(yè)工程項(xiàng)目的體積越來(lái)越大，開(kāi)發(fā)的功能越來(lái)越多，頁(yè)面也越來(lái)越多，項(xiàng)目隨之也變得越來(lái)越臃腫，維護(hù)起來(lái)十分困難，往往改一個(gè)logo，或者改一個(gè)小樣式，都要將項(xiàng)目全部重新打包一遍，維護(hù)困難，部署也困難。 ????????因此前端在借鑒后端的微服務(wù)架構(gòu)模式后，衍生了...

    wangbinke 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<