Vue.js Webpack 多页面演示工程

基于Vue.js+Webpack的多页面演示工程

开发概述

本项目起源是希望使用vue.js+webpack实现多页面的开发，因为原本的vue.js的官方项目只有一个入口，需要通过前端路由来进行多页面，这样对一次只需要访问一个页面的项目显然有些冗余。

Google了一番，vue.js多页面有两个较为完整的工程，分别是yaoyao1987和bluefox1688的项目。首先感谢两人的贡献和启发，但是他们两人的项目都存在一些问题，所以不由得又要开一个新工程。

首先是yaoyao1987的工程，多入口的代码十分正确，但是最终运行起来会报错，原因在于虽然实现了多入口，但是最终使用htmlplugin打包的时候将全部入口的js都打进去了，所以会有多个new Vue()被打包，造成错误。

bluefox1688的工程，修复了yaoyao1987的问题，在此基础上也进行了一些改造，我认为不够纯粹，尤其是其中第一条“增加全局统一使用的模块Lib.js库”，这个不明白为何这样做，可能是我的理解有误，但我认为这是基本的nodejs的功能，而不是新实现的功能点。其他几个功能点也存在类似问题。

功能特性

1. 在构建脚本utils.js中增加了全局的获取入口文件的公共方法，而不是每个脚本中重复出现。
2. 将最终生成好的XXXX.html文件直接置于根目录，更符合一般网站的访问逻辑。
3. 原汁原味，最大程度保持官网的风格和组织结构。
4. 将页面级vue文件提取到page文件夹，与组件作区分。

使用方法

# 安装基本依赖
npm install

# 在本地8080端口启动带热加载功能的服务
# 端口可在配置文件config/index.js中修改
npm run dev

# 进行现网打包操作
npm run build

# 进行代码检查(一般不需单独运行，以上两个过程都包括代码检查)
npm run lint

目录说明

build

基本构建命令目录，明白原理后可自行修改

config

基础配置信息，可设置导出时资源目录、本地调试端口等

src

代码目录

• assets

  静态资源，所有页面用到的资源文件都应该在此目录中

• components

  vue组件，所有vue子组件

• pages

  vue父组件，单独放一个文件夹是方便寻找页面入口组件

• views

  视图入口，子文件夹名代表最终html名

  如需最终生成index.html，则需建立views/index/index.html，如需生成about.html，则需建立views/about/about.html

static

静态资源目录，此目录下的文件会直接被拷贝到输出的/static文件夹下

注意！千万不要将图片、字体等页面需要的文件放到此处，一切页面需要的资源应该在src/assets目录下，否则打包后路径会不正常

其他说明

• dev模式下会自动打开浏览器，如果觉得烦，自行删除build/dev-server.js中的69~71行