详解vue-cli多页面工程实践

简介

在实际项目中，往往需要构建多页应用来满足不同的功能需求。本文将详细介绍如何使用vue-cli构建多页应用。

准备工作

安装node.js
安装vue-cli

创建工程

打开终端，执行以下命令来创建vue-cli的多页应用工程：

vue init webpack my-project

这里将工程命名为my-project，你可以自定义名称。在这个过程中，有几个需要注意的地方：

是否安装 vue-router：不需要安装，因为多页应用不需要使用vue-router。
是否使用 ESLint：可以选择使用，根据项目需要决定。
是否使用 Karma + Mocha：不需要使用，因为多页应用不需要单元测试。

目录结构

创建工程后，工程结构如下：

my-project
├── build
├── config
├── node_modules
├── src
│   ├── assets
│   ├── components
│   ├── views
│   ├── App.vue
│   └── main.js
├── static
├── .babelrc
├── .editorconfig
├── .gitignore
├── index.html
└── package.json

重要的目录是src目录，它包含了所有的源代码和页面模板。views目录用于存放多个页面，每个页面一个文件夹，文件夹里面至少有一个html和一个js文件。

配置多页应用

多页应用的配置依赖于webpack。打开/config/index.js文件，修改module.exports对象，添加如下代码：

const glob = require('glob')
const path = require('path')

function getEntry(globPath) {
  let entries = {}
  glob.sync(globPath).forEach(function(entry) {
    let basename = path.basename(entry, path.extname(entry))
    entries[basename] = entry
  })
  return entries
}

module.exports = {
  // ...
  // 修改这里
  pages: getEntry('./src/views/**/*.js'),
}

这个代码做了什么呢？首先，它使用glob库来匹配src/views目录下的所有js文件，然后将js文件名作为页面名，作为pages的键，将js文件作为pages的值。这样，我们就完成了多个页面的配置。

创建页面模板

多页应用需要为每个页面提供独立的HTML模板，可以在这个模板中引入不同的JS文件。建议将模板以.html或者.ejs文件来保证代码的可维护性。

在/src/views目录中，创建一个名为example的目录，在其中添加一个名为index.html的文件，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

这里只需要一个div用于vue的挂载，和一个script标签用于引入入口JS文件。

创建页面脚本

在/src/views/example目录中，创建一个名为index.js的文件，代码如下：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App),
})

这里的代码和单页应用是一样的，只不过挂载的位置从#app变成了example.html中的#app。

运行代码

上面的代码已经创建完毕，可以执行下面的命令来运行项目

npm run dev

这个命令会启动一个开发服务器，打开 http://localhost:8080/example.html 即可看到页面效果。

完整示例代码可在GitHub中下载获取。

示例说明1: 添加第二个页面

为了演示如何添加一个新的页面，我们接下来再添加一个名为about的页面。

首先在/src/views目录下，创建一个名为about的目录，在其中添加一个名为index.html的文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>About</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

然后在about目录下，再创建一个名为index.js的文件。

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App, {
    props: {
      msg: 'About Page',
    },
  }),
})

这里的代码也是非常简单，和示例一一样的，只不过添加了一个props来传递组件的信息。

继续执行npm run dev，然后在浏览器中打开http://localhost:8080/about.html，即可看到about页面的效果。这个时候，Vue组件会展示About Page的信息。

示例说明2: 使用CSS模块

在多页应用中，往往需要通过CSS将各个页面的样式区分开来。使用CSS模块可以很好地解决这个问题。

首先，保证我们的项目支持CSS模块，打开/config/index.js文件，找到module.exports对象，添加如下代码：

module: {
  rules: [
    // 添加这一行
    { test: /\.s(c|a)ss$/, use: ['vue-style-loader', 'css-loader', 'sass-loader'] },
  ]
},

这里添加了一个Sass Loader，用于处理.scss文件。

然后，在/src/views/example目录中，创建一个名为index.scss的文件，代码如下：

.hello {
  font-size: 40px;
}

这里的样式非常简单，只是将字体设置为了40px来区分其他页面。

接着，修改/src/components/HelloWorld.vue文件，如下：

<template>
  <div class="hello">
    {{ msg }}
  </div>
</template>

<!-- 添加这一行 -->
<style lang="scss">
@import "@/views/example/index.scss";
</style>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

在这里，我们将刚才写的index.scss样式引入了进来。

最后，重新运行npm run dev，打开http://localhost:8080/example.html查看页面效果，应该可以看到页面中的Hello World字体已经变成了40px。

总结

通过以上的步骤，我们成功地配置了vue-cli多页应用的环境，并创建了多个页面，在页面之间应用不同的样式和脚本，来满足各种需求。

相关的代码可以在GitHub中下载、查看。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解vue-cli多页面工程实践 - Python技术站