极简指南：使用 Vue 2 和 Webpack 3 构建多页应用程序

前端

2023-10-11 12:54:28

前言

在开始构建多页应用程序之前，我们需要确定项目目录结构，包括开发目录和生产目录。

1. 开发目录

开发目录是我们在开发过程中使用的目录，通常包含以下文件和文件夹：

src/：源代码目录，包含应用程序的源代码。
node_modules/：依赖项目录，包含应用程序运行所需的依赖项。
package.json：项目配置，包含项目名称、版本号、依赖项等信息。
webpack.config.js：Webpack 配置文件，用于配置 Webpack 的构建过程。
.gitignore：Git 忽略文件，用于忽略不需要提交到 Git 版本库的文件。

2. 生产目录

生产目录是应用程序构建后的目录，通常包含以下文件和文件夹：

dist/：构建后的代码目录，包含应用程序的构建后的代码。
index.html：主 HTML 文件，用于加载应用程序。
main.js：应用程序的主 JavaScript 文件。
main.css：应用程序的主 CSS 文件。
.htaccess：Apache 配置文件，用于配置 Apache 服务器。

构建多页应用程序

确定了项目目录结构后，我们就可以开始构建多页应用程序了。

安装依赖项

首先，我们需要安装 Vue 2 和 Webpack 3 的依赖项：

npm install --save vue vue-router webpack webpack-cli

创建 Vue 项目

接下来，我们需要创建一个 Vue 项目：

vue create my-app

配置 Webpack

在创建的 Vue 项目中，我们需要配置 Webpack。首先，我们需要在 package.json 文件中添加以下配置：

{
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  }
}

然后，我们需要在 webpack.config.js 文件中添加以下配置：

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  }
};

创建多页应用程序

在 src/ 目录下，我们需要创建两个 Vue 组件，分别是 Home.vue 和 About.vue。

<!-- Home.vue -->
<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

<!-- About.vue -->
<template>
  <div>
    <h1>About</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>

然后，我们需要在 src/main.js 文件中注册这两个组件：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './Home.vue';
import About from './About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
}).$mount('#app');