详解如何从零开始搭建Express+Vue开发环境

从零开始搭建一个Express+Vue的开发环境，步骤如下：

1. 安装Node.js和npm

首先需要安装Node.js和npm，这是Express和Vue的开发环境所依赖的环境。可以在Node.js官网上下载最新版本的Node.js，安装好后可以在命令行中输入node -v和npm -v命令来确认是否安装成功。

2. 创建Express应用

安装好Node.js和npm后，进入命令行界面，使用以下命令来创建一个Express应用：

express myapp

其中myapp是你想要创建的应用名称，可以自行修改。该命令会自动创建一个名为myapp的文件夹，里面包含了一个Express应用的基本结构。

3. 安装依赖

创建好Express应用后，需要安装一些依赖。进入myapp文件夹，使用以下命令安装依赖：

cd myapp

npm install

其中cd myapp命令是进入到myapp文件夹中，npm install命令是安装依赖。

4. 安装和配置Vue

安装Vue需要使用npm命令。在命令行中输入以下命令进行Vue的安装：

npm install vue --save

这里使用--save参数将Vue的依赖加入到项目中。

安装完成后，需要在Express应用的模板文件中引入Vue。在views文件夹下创建index.ejs文件，并在文件中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express Vue Test</title>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

5. 运行应用

完成以上步骤后，使用以下命令启动应用：

npm start

启动成功后，在浏览器中输入http://localhost:3000/，即可访问到Express+Vue的应用。

示例说明

这里提供两个简单的示例来讲解如何从零开始搭建Express+Vue的开发环境。

示例一：Vue计数器

创建一个简单的Vue计数器，每次点击按钮，计数器加1。步骤如下：

在views文件夹下创建counter.ejs文件，并在文件中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express Vue Counter</title>
</head>
<body>
  <div id="app">
    <p>{{ count }}</p>
    <button v-on:click="increment">Increment</button>
  </div>
  <script src="/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        increment: function() {
          this.count++;
        }
      }
    })
  </script>
</body>
</html>

在app.js中添加路由，使得点击网页中的超链接可以跳转到计数器页面。

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var counterRouter = require('./routes/counter');  // 新添加的路由

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/counter', counterRouter);  // 添加新路由

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

在routes文件夹下创建counter.js文件，并在文件中添加以下代码：

var express = require('express');
var router = express.Router();

/* GET counter page. */
router.get('/', function(req, res, next) {
  res.render('counter', { title: 'Express Vue Counter' });
});

module.exports = router;

启动应用，在浏览器中输入http://localhost:3000/counter，即可访问到计数器页面。

示例二：Vue组件

创建一个Vue组件，通过组件实现一个todo列表的添加和删除。步骤如下：

在views文件夹下创建todo.ejs文件，并在文件中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Express Vue Todo</title>
</head>
<body>
  <div id="app">
    <input v-model="newTodoText" v-on:keyup.enter="addTodo">
    <ul>
      <li v-for="(todo, index) in todos">
        {{ todo.text }} 
        <button v-on:click="removeTodo(index)">X</button>
      </li>
    </ul>
  </div>
  <script src="/vue.js"></script>
  <script>
    // todo组件
    Vue.component('todo-item', {
      template: '<li>{{ todo.text }} <button v-on:click="removeTodo">X</button></li>',
      props: ['todo', 'index'],
      methods: {
        removeTodo: function() {
          this.$emit('remove', this.index);
        }
      }
    })
    // Vue实例
    var app = new Vue({
      el: '#app',
      data: {
        newTodoText: '',
        todos: []
      },
      methods: {
        addTodo: function() {
          var todo = {
            text: this.newTodoText,
          };
          this.todos.push(todo);
          this.newTodoText = '';
        },
        removeTodo: function(index) {
          this.todos.splice(index, 1);
        }
      }
    })
  </script>
</body>
</html>

在app.js中添加路由，使得点击网页中的超链接可以跳转到todo页面。

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var todoRouter = require('./routes/todo');  // 新添加的路由

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/todo', todoRouter);  // 添加新路由

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

在routes文件夹下创建todo.js文件，并在文件中添加以下代码：

var express = require('express');
var router = express.Router();

/* GET todo page. */
router.get('/', function(req, res, next) {
  res.render('todo', { title: 'Express Vue ToDo' });
});

module.exports = router;