基于vue cli重构多页面脚手架过程详解

下面我将为你详细讲解“基于vue-cli重构多页面脚手架过程详解”的完整攻略。

一、背景和意义

在日常开发中，使用多页面开发的情况比较常见，但是现有的脚手架不一定完全支持多页面开发。因此，我们需要对现有的多页面脚手架进行重构，以适应开发需求。本攻略就是基于Vue CLI对多页面脚手架进行重构的具体过程。

二、多页面脚手架原理

多页面脚手架就是将每个页面都单独打包成一个HTML文件的项目。这样可以避免不必要的代码冗余，并且可以方便快速地进行页面的增删改。

具体实现原理是通过html-webpack-plugin插件，在Webpack打包时向模板中注入生成的JS、CSS等文件，并输出HTML文件。

三、基于vue-cli搭建多页面脚手架

安装Vue CLI

首先，我们需要安装Vue CLI，用于创建Vue项目和管理依赖。具体命令如下：

npm install -g @vue/cli

创建Vue项目

创建Vue项目时，需要选择多页面模式。输入以下命令：

vue create my-project

在命令行交互界面中，选择 Manually select features，然后选择 Babel 和 Router，最后选择 Vue version 2.x。

接着，根据提示选择 In dedicated config files，并选择 Yes。

最后，选择 Pick a CSS pre-processor (Less、Sass、Stylus)，并根据自己的喜好选择一种CSS预处理器即可。

配置页面入口

在 src 目录下新建一个 pages 文件夹，用于保存页面文件。每个页面都需要一个 .js 和 .html 文件。以 index 页面为例，文件结构如下：

- src
    - pages
        - index
            - index.js
            - index.html

在 index.js 文件中写入以下代码：

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

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

在 index.html 文件中写入以下代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Index Page</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

注意，在 index.html 文件中需要有一个 id 为 app 的 div 标签。

配置Webpack

在Vue CLI中，Webpack的配置文件隐藏在node_modules中，我们需要使用 vue.config.js 文件进行自定义配置。

在项目根目录下创建一个 vue.config.js 文件，写入以下代码：

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

function resolve (dir) {
  return path.join(__dirname, dir)
}

function getEntry () {
  const entry = {}
  glob.sync('./src/pages/**/index.js').forEach(path => {
    const chunk = path.split('./src/pages/')[1].split('/index.js')[0]
    entry[chunk] = path
  })
  return entry
}

const pages = getEntry()

module.exports = {
  pages,
  chainWebpack: config => {
    Object.keys(pages).forEach(entryName => {
      config.plugins.delete(`html-${entryName}`)
      config.plugins.delete(`preload-${entryName}`)
      config.plugins.delete(`prefetch-${entryName}`)

      config.entry(entryName).add(pages[entryName]).end()

      config.plugin(`html-${entryName}`).use(HtmlWebpackPlugin, [{
        title: entryName,
        filename: `${entryName}.html`,
        template: `./src/pages/${entryName}/index.html`,
        chunks: ['chunk-vendors', 'chunk-common', entryName]
      }])
    })
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  }
}

以上代码的作用是：

获取 src/pages 目录下所有的 index.js 入口文件；
配置Webpack的 entry 和 output，每个页面对应的JS和HTML文件会生成在相应的目录下；
配置 html-webpack-plugin 插件，自动生成HTML文件，并将生成的JS等文件自动注入HTML中。
启动开发服务器

在命令行中输入以下命令启动开发服务器：

npm run serve

在浏览器中输入 http://localhost:8080/index.html 即可查看页面。

四、示例说明

这里提供两个示例，一个是简单的多页面脚手架，一个是基于ElementUI的多页面脚手架。

简单的多页面脚手架

代码示例：https://github.com/ruby215/vue-multiple-pages-starter

该示例基于Vue CLI 3.X重构了一个多页面脚手架，包括两个页面：首页和登录页。并且使用了Less作为CSS预处理器。

该示例的配置十分简单明了，容易上手。

基于ElementUI的多页面脚手架

代码示例：https://github.com/ruby215/element-ui-multiple-pages-starter

该示例基于Vue CLI 4.X重构了一个基于ElementUI的多页面脚手架，包括两个页面：首页和登录页。这里使用了ElementUI组件库，并使用了Sass作为CSS预处理器。

该示例的目录结构和上面的示例类似，但是在 vue.config.js 文件中需要添加ElementUI的按需加载代码，具体可以查看源码。

五、总结

以上就是基于Vue CLI重构多页面脚手架的全过程以及两个示例的介绍。多页面脚手架的使用可以更好地满足项目对于多页面的需求，并且可以提供更好的性能和体验。但是建议根据实际项目需求进行调整和优化。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于vue cli重构多页面脚手架过程详解 - Python技术站