如何一起使用 ExpressJS、VueJS、Jade?

在现代 Web 开发中，ExpressJS、VueJS 和 Jade 都是非常流行的技术。ExpressJS 是一个基于 Node.js 的 Web 框架，VueJS 是一个渐进式 JavaScript 框架，Jade 是一个高性能模板引擎。本文介绍如何一起使用这三个技术。

安装依赖

在开始之前，需要确保已经安装了 Node.js。在命令行中运行以下命令，安装项目所需的依赖：

npm install express vue jade

创建 ExpressJS 应用程序

在项目的根目录下创建一个名为 app.js 的新文件，并添加以下代码：

const express = require('express')
const app = express()

app.set('view engine', 'jade')
app.use(express.static('public'))

app.get('/', function (req, res) {
  res.render('index', { title: 'ExpressJS + VueJS + Jade' })
})

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

这些代码设置了 ExpressJS 应用程序的视图引擎为 Jade，并将静态文件目录设置为 public。设置路由 / 并渲染 index.jade 文件。

创建 Jade 模板

在项目根目录的 views 目录下创建一个名为 index.jade 的新文件，并添加以下代码：

html
  head
    title= title
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    script(src='https://cdn.jsdelivr.net/npm/vue')
    script(src='js/main.js')
  body
    #app

这个 Jade 模板生成了一个 VueJS 应用程序的容器和必要的 JavaScript 资源链接。

创建 VueJS 应用程序

在 public/js 目录下创建一个名为 main.js 的新文件，并添加以下代码：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

这个 VueJS 应用程序创建了一个名为 app 的 Vue 实例，它绑定了 id 为 #app 的元素并将 message 设置为 Hello Vue!。

运行应用程序

在命令行中运行以下命令，启动 ExpressJS 应用程序：

node app.js

在 Web 浏览器中打开 http://localhost:3000，您将看到一个显示 Hello Vue! 的页面。

结论

通过结合 ExpressJS、VueJS 和 Jade，可以轻松地创建具有高性能和灵活性的 Web 应用程序。这些技术也都有着非常庞大的社区和文档支持，为开发人员提供了更好的开发体验和更高效的开发效率。