Node.js是一個基于Chrome JavaScript運行時建立的平臺。它使得JavaScript可以運行在服務器端,實現了JavaScript全棧開發的夢想。Vue.js是一個輕量級的前端框架,它只關注視圖層,通過組件化和數據驅動的思想,使得構建交互式的Web界面變得更加容易。
使用Vue.js進行開發需要依賴一些第三方庫,其中一個重要的庫就是ElementUI,它是一個基于Vue.js 2.0的UI庫,擁有豐富的組件和設計規范,可以快速的搭建美觀、易用的Web界面。下面是一個使用Node.js + Vue.js + ElementUI的實例:
const express = require('express') const app = express() app.use(require('cors')()) app.use(require('helmet')()) app.use(require('morgan')('dev')) app.use(require('body-parser').json()) app.use('/static', express.static(__dirname + '/uploads')) app.use(require('./routes')) app.listen(3000, () =>{ console.log('Server running at http://localhost:3000') })
上面的代碼是一個簡單的Node.js后端應用,使用了一些常用的中間件,比如CORS、Helmet、Morgan和BodyParser等。這里的路由信息都寫在一個routes.js文件中,具體的內容可以自己定義。接下來是一個使用Vue.js和ElementUI的前端實例:
Header Aside Main Footer
上面的代碼是一個使用ElementUI搭建的布局,使用了容器和布局組件,可以快速的構建出一個頁面框架。在代碼中引入了ElementUI的樣式和Vue.js庫,從而可以使用ElementUI提供的組件。在最后導出一個Vue組件對象,該對象可以在Vue.js中進行注冊使用。