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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
基于Asp.net与Javascript控制的日期控件
May 22 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
Apr 27 Javascript
使用3D引擎threeJS实现星空粒子移动效果
Sep 13 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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数组实例详解
2016/06/26 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript编程中window的location与history对象详解
2015/10/26 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
利用python实现数据分析
2017/01/11 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
基于python实现复制文件并重命名
2020/09/16 Python
详解如何修改python中字典的键和值
2020/09/29 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
网络方面基础面试题
2012/11/16 面试题
教师专业理论水平的自我评价分享
2013/11/09 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
节约用电倡议书
2015/04/28 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书