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

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

一、背景和意义

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

二、多页面脚手架原理

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

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

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

  1. 安装Vue CLI

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

npm install -g @vue/cli
  1. 创建Vue项目

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

vue create my-project

在命令行交互界面中,选择 Manually select features,然后选择 BabelRouter,最后选择 Vue version 2.x

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

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

  1. 配置页面入口

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 文件中需要有一个 idapp 的 div 标签。

  1. 配置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的多页面脚手架。

  1. 简单的多页面脚手架

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

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

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

  1. 基于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技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • 浅谈Vue中render中的h箭头函数

    下面我将详细讲解“浅谈Vue中render中的h箭头函数”的攻略。 什么是render函数? 在Vue中,我们经常使用template模板来编写组件。但是,在某些情况下,我们可能需要使用Vue的render函数来动态地生成组件的DOM结构。 因此,Vue提供了render函数来代替template。render函数是一个函数,它接收一个h函数作为它的第一个参…

    Vue 2023年5月28日
    00
  • 亲自动手实现vue日历控件

    下面我来详细讲解“亲自动手实现vue日历控件”的完整攻略。 步骤一:搭建项目 首先,我们需要在本地搭建一个vue项目。可以使用vue-cli来搭建,具体步骤如下: # 全局安装vue-cli npm install -g vue-cli # 创建一个vue项目 vue create calendar cd calendar # 运行项目 npm run se…

    Vue 2023年5月29日
    00
  • 详解Vue中的路由与多种守卫

    详解Vue中的路由与多种守卫 在Vue中,路由是前端开发中非常重要的一个概念,它提供了页面之间切换的功能。而在实际开发中,为了更好的控制页面的访问权限和交互行为,我们需要使用路由守卫来进行相关的操作。 路由的基本概念 在Vue中,使用Vue Router来进行路由的管理。Vue Router是Vue.js官方提供的路由管理器,可以实现页面跳转、路由拦截等功能…

    Vue 2023年5月27日
    00
  • vue如何实现二进制流文件导出excel

    下面是对”Vue如何实现二进制流文件导出excel”的完整攻略。 1. 背景 在实际开发中,我们经常会遇到需要将数据导出为Excel文件的需求,这个时候我们可以使用前端导出Excel文件的方式来实现。Vue通过其强大的功能,提供了较为便捷的二进制流文件导出Excel的方法。 2. 实现步骤 步骤一:安装相关依赖 首先需要安装以下两个依赖: file-save…

    Vue 2023年5月27日
    00
  • 详细对比Ember.js和Vue.js

    详细对比Ember.js和Vue.js 在讨论Ember.js和Vue.js之前,我们需要了解什么是前端框架。前端框架是一种帮助我们快速构建Web应用程序的工具,使用前端框架可以节省我们的开发时间和精力。Ember.js和Vue.js都是非常优秀的前端框架,下面我们将逐一对比这两种框架,让大家更好地了解它们的优缺点。 Ember.js Ember.js是一种…

    Vue 2023年5月28日
    00
  • vue跳转页签传参并查询参数的保姆级教程

    下面是关于 Vue 跳转页签传参并查询参数的保姆级教程的详细讲解。 准备工作 首先,您需要确保您的项目中已经安装并且引入了 Vue-Router。 npm install vue-router –save 在您的 main.js 文件中,引入 Vue-Router,新建一个路由实例,并将其传递给 Vue 的实例: import Vue from ‘vue’…

    Vue 2023年5月27日
    00
  • 详解vue数组遍历方法forEach和map的原理解析和实际应用

    详解Vue数组遍历方法forEach和map的原理解析和实际应用 在Vue开发中,使用数组遍历方法可以方便地对数组进行操作和处理。Vue提供了两种常用的数组遍历方法:forEach和map,它们有一些不同的应用场景,本篇文章将对这两个方法进行详细说明。 forEach方法的原理与应用 原理 forEach方法是ES5中提供的数组遍历方法,它的原理是针对数组中…

    Vue 2023年5月28日
    00
  • vue快速入门基础知识教程

    以下是“vue快速入门基础知识教程”的完整攻略: 一、Vue.js是什么 Vue.js是一款轻量级、渐进式的JavaScript框架。它易于上手,具有更加简洁灵活的API,能够更加方便的实现前端页面的数据双向绑定、组件化开发、模块化开发等功能。 二、Vue.js的核心概念 数据双向绑定 Vue.js通过数据双向绑定,能够实现页面数据的实时更新。当Vue实例中…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部