vue2.0之多页面的开发的示例
我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是。因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面。但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。 vue的开发有两种,一种是直接的在script标签里引入vue.js文件即可,这样子引入的话个人感觉做小型的多页面会比较舒坦,一旦做大型一点的项目,还是离不开webpack。所以另一种方法也就是基于webpack和vue-cli的工程化开发。下面详解步骤。 先声明,如果用vue进行工程化开发,首先要有node.js,然后再下一个npm,不过一般新版的node都会有npm所以可以不用弄。指令是在命令行里输入。首先第一步就是生成一个vue项目,用指令: 博主本人声明的文件名为test,下载好后一路enter,之后便生成了一个vue项目,但是这个vue项目还没有一些相关的依赖,这个时候需要进入到该文件夹里面,输入指令: 如果网速不好,则用cnpm install,效果一样。略等几分钟后整个依赖便已经下完,之后输入指令: 则会自动打开一个界面,如果报错不能打开网页的话只有一种原因,那就端口占用,这个时候需要到/config/index.js目录下改端口就行。 当一个vue项目完成好所有的配置后,接下来就是我们的重点了,首先我们新新建几个html文件,博主我新建了一个one.html和two.html,及其与之对应的vue文件和js文件,文件目录如下: 弄好之后我们进入buildwebpack.base.conf.js目录下,在module.exports的域里,找到entry,在那里配置添加多个入口: 注意,紫色部分的变量名要起好,因为后面要用到,以防忘记。 接下来就是对开发环境run dev里进行修改,打开buildwebpack.dev.conf.js文件,在module.exports那里找到plugins,下面写法如下: 在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry,如果没写则引入所有页面的资源。 之后就对run build也就是编译环境进行配置。首先打开configindex.js文件,在build里加入这个: 然后打开/build/webpack.prod/conf.js文件,在plugins那里找到HTMLWebpackPlugin,然后添加如下代码: 其中filename引用的是configindex.js里的build,每个页面都要配置一个chunks,不然会加载所有页面的资源。 然后one.js文件可以这样写: Vue.config.productionTip = false
/ eslint-disable no-new / two的写法与之类似,所以不写下来了, 然后App.vue里通过这样写:
two
{{msg}} 这样子当你打开页面的时候,点击上面one的链接就会跳转到one.html,点击two就跳转到two.html。这样子就大功告成了。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |