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 相关文章推荐
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
Mar 04 Javascript
浅谈js中的闭包
Mar 16 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
js运动事件函数详解
Oct 21 Javascript
关于前后端json数据的发送与接收详解
Jul 30 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
php在文件指定行中写入代码的方法
2012/05/23 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP实现微信提现功能
2018/09/30 PHP
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
node.js require() 源码解读
2015/12/13 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
JS实现图片切换特效
2019/12/23 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
python中stdout输出不缓存的设置方法
2014/05/29 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python时间time模块处理大全
2020/10/25 Python
荷兰超市:DEEN
2018/03/14 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
工作中个人的自我评价
2013/12/31 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
销售总经理岗位职责
2014/03/15 职场文书
员工试用期自我评价
2014/09/18 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
费用申请报告范文
2015/05/15 职场文书
优质护理服务心得体会
2016/01/22 职场文书