vue2.0之多页面的开发的示例


Posted in Javascript onJanuary 30, 2018

我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是。因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面。但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。

vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。
先声明,如果用vue进行工程化开发,首先要有node.js,然后再下一个npm,不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。首先第一步就是生成一个vue项目,用指令:

vue init webpack test

博主本人声明的文件名为test,下载好后一路enter,之后便生成了一个vue项目,但是这个vue项目还没有一些相关的依赖,这个时候需要进入到该文件夹里面,输入指令:

npm install

如果网速不好,则用cnpm install,效果一样。略等几分钟后整个依赖便已经下完,之后输入指令:

npm run dev

则会自动打开一个界面,如果报错不能打开网页的话只有一种原因,那就端口占用,这个时候需要到/config/index.js目录下改端口就行。

当一个vue项目完成好所有的配置后,接下来就是我们的重点了,首先我们新新建几个html文件,博主我新建了一个one.html和two.html,及其与之对应的vue文件和js文件,文件目录如下:

弄好之后我们进入\build\webpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口:

entry: {
 app: './src/main.js',
 one: './src/js/one.js',
 two: './src/js/two.js'
},

注意,紫色部分的变量名要起好,因为后面要用到,以防忘记。

接下来就是对开发环境run dev里进行修改,打开\build\webpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下:

plugins: [
 new webpack.DefinePlugin({
  'process.env': config.dev.env
 }),
 // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
 new webpack.HotModuleReplacementPlugin(),
 new webpack.NoEmitOnErrorsPlugin(),
 // https://github.com/ampedandwired/html-webpack-plugin
 new HtmlWebpackPlugin({
  filename: 'index.html',
  template: 'index.html',
  inject: true,
  chunks: ['app']
 }),
 new HtmlWebpackPlugin({
  filename: 'one.html',
  template: 'one.html',
  inject: true,
  chunks: ['one']
 }),
 new HtmlWebpackPlugin({
  filename: 'two.html',
  template: 'two.html',
  inject: true,
  chunks: ['two']
 }),
 new FriendlyErrorsPlugin()
]

在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry,如果没写则引入所有页面的资源。

之后就对run build也就是编译环境进行配置。首先打开\config\index.js文件,在build里加入这个:

index: path.resolve(__dirname, '../dist/index.html'),
one: path.resolve(__dirname, '../dist/one.html'),
two: path.resolve(__dirname, '../dist/two.html'),

然后打开/build/webpack.prod/conf.js文件,在plugins那里找到HTMLWebpackPlugin,然后添加如下代码:

new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : config.build.index,
 template: 'index.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  // more options:
  // https://github.com/kangax/html-minifier#options-quick-reference
 },
 // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'app']
}),
new HtmlWebpackPlugin({
 filename: config.build.one,
 template: 'one.html',
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency',
 chunks: ['manifest', 'vendor', 'one']
}),
 new HtmlWebpackPlugin({
   filename: config.build.two,
   template: 'two.html',
   inject: true,
   minify: {
     removeComments: true,
     collapseWhitespace: true,
     removeAttributeQuotes: true
   },
   chunksSortMode: 'dependency',
   chunks: ['manifest', 'vendor', 'two']
 }),

其中filename引用的是\config\index.js里的build,每个页面都要配置一个chunks,不然会加载所有页面的资源。

然后one.js文件可以这样写:

import Vue from 'vue'
import one from './one.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#one',
 render: h => h(one)
})
one.vue写法如下:
<template>
 <div id="one">
  {{msg}}
 </div>
</template>

<script>
export default {
 name: 'one',
 data () {
  return {
   msg: 'I am one'
  }
 }
}
</script>

two的写法与之类似,所以不写下来了,

然后App.vue里通过这样写:

<template>
 <div id="app">
  <a href="one.html" rel="external nofollow" >one</a><br>
  <a href="two.html" rel="external nofollow" >two</a><br>
  {{msg}}
 </div>
</template>

这样子当你打开页面的时候,点击上面one的链接就会跳转到one.html,点击two就跳转到two.html。这样子就大功告成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 语言的递归编程
May 18 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 #Javascript
jQuery与vue实现拖动验证码功能
Jan 30 #jQuery
5 种JavaScript编码规范
Jan 30 #Javascript
vue源码入口文件分析(推荐)
Jan 30 #Javascript
Vue精简版风格指南(推荐)
Jan 30 #Javascript
详解javascript常用工具类的封装
Jan 30 #Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
Jan 30 #Javascript
You might like
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
用PHP读取flv文件的播放时间长度
2009/09/03 PHP
PHP对字符串的递增运算分析
2010/08/08 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
canvas的神奇用法
2017/02/03 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
express.js中间件说明详解
2019/03/19 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
php优化查询foreach代码实例讲解
2021/03/24 PHP
2014年图书馆工作总结
2014/11/25 职场文书
创业计划书之服装
2019/10/07 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技