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使用focus()设置焦点失败的解决方法
Sep 03 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
javascript刷新父页面方法汇总详解
Oct 10 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
详解Vue router路由
Nov 20 Vue.js
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/10/09 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
js实现目录定位正文示例
2013/11/14 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python实现AES加密与解密
2019/03/28 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
大学生实习自我鉴定
2013/12/11 职场文书
父母寄语大全
2014/04/12 职场文书
企业形象策划方案
2014/05/29 职场文书
教师职业道德事迹材料
2014/08/18 职场文书
2014年审计工作总结
2014/11/17 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
《月光曲》教学反思
2016/02/16 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers