vue怎么做网页（vue2.0怎样开发多页面）

本文目录

• vue2.0怎样开发多页面
• 怎样使用vue做出单页应用前端路由
• vue聊天室的基础静态页面搭建
• 单独的vue可以做网页吗

vue2.0怎样开发多页面

这次给大家带来vue2.0怎样开发多页面，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项目，用指令：
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文件，文件目录如下：
弄好之后我们进入buildwebpack.base.conf.js目录下，在module.exports的域里，找到entry，在那里配置添加多个入口：
entry: {
app: ’./src/main.js’,
one: ’./src/js/one.js’,
two: ’./src/js/two.js’
},
注意，紫色部分的变量名要起好，因为后面要用到，以防忘记。
接下来就是对开发环境run dev里进行修改，打开buildwebpack.dev.conf.js文件，在module.exports那里找到plugins，下面写法如下：
plugins: [
new webpack.DefinePlugin({
’process.env’: config.dev.env
}),
***隐藏网址***
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
***隐藏网址***
new HtmlWebpackPlugin({
filename: ’index.html’,
template: ’index.html’,
inject: true,
chunks:
}),
new HtmlWebpackPlugin({
filename: ’one.html’,
template: ’one.html’,
inject: true,
chunks:
}),
new HtmlWebpackPlugin({
filename: ’two.html’,
template: ’two.html’,
inject: true,
chunks:
}),
new FriendlyErrorsPlugin()
]
在chunks那里的app指的是webpack.base.conf.js的entry那里与之对应的变量名。chunks的作用是每次编译、运行时每一个入口都会对应一个entry，如果没写则引入所有页面的资源。
之后就对run build也就是编译环境进行配置。首先打开configindex.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:
***隐藏网址***
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: ’dependency’,
chunks:
}),
new HtmlWebpackPlugin({
filename: config.build.one,
template: ’one.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: ’dependency’,
chunks:
}),
new HtmlWebpackPlugin({
filename: config.build.two,
template: ’two.html’,
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: ’dependency’,
chunks:
}),
其中filename引用的是configindex.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》
《p id="one"》
{{msg}}
《/p》
《/template》
《script》
export default {
name: ’one’,
data () {
return {
msg: ’I am one’
}
}
}
《/script》
two的写法与之类似，所以不写下来了，
然后App.vue里通过这样写：
《template》
《p id="app"》
《a href="one.html" rel="external nofollow" 》one《/a》《br》
《a href="two.html" rel="external nofollow" 》two《/a》《br》
{{msg}}
《/p》
《/template》这样子当你打开页面的时候，点击上面one的链接就会跳转到one.html，点击two就跳转到two.html。这样子就大功告成了。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
JS提示文本框邮箱地址补全
$.ajax()方法怎样从服务器里获取json数据

怎样使用vue做出单页应用前端路由

这次给大家带来怎样使用vue做出单页应用前端路由，使用vue做出单页应用前端路由的注意事项有哪些，下面就是实战案例，一起来看一下。
写在前面：通常 SPA 中前端路由有2种实现方式：
window.history
location.hash
下面就来介绍下这两种方式具体怎么实现的
一.history
1.history基本介绍
window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(n) - 接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面
如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败
在HTML5，history对象提出了 pushState() 方法和 replaceState() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了，现在的前端路由也是基于这个原理实现的。
2.history.pushState
pushState(stateObj, title, url) 方法向历史栈中写入数据，其第一个参数是要写入的数据对象（不大于640kB)，第二个参数是页面的 title, 第三个参数是 url (相对路径)。
stateObj ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
关于pushState，有几个值得注意的地方：
pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应,只有当触发前进后退等事件（back()和forward()等）时浏览器才会刷新
这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户，所以当违背同源策略时将会报错
3.history.replaceState
replaceState(stateObj, title, url) 和pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其余和 pushState一模一样
4.popstate事件
定义：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。
注意：仅仅调用pushState方法或replaceState方法 ，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
用法：使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象（即这两个方法的第一个参数）。
5.history实现spa前端路由代码
《a class="api a"》a.html《/a》
《a class="api b"》b.html《/a》
// 注册路由
document.querySelectorAll(’.api’).forEach(item =》 {
item.addEventListener(’click’, e =》 {
e.preventDefault();
let link = item.textContent;
if (!!(window.history && history.pushState)) {
// 支持History API
window.history.pushState({name: ’api’}, link, link);
} else {
// 不支持,可使用一些Polyfill库来实现
}
}, false)
});
// 监听路由
window.addEventListener(’popstate’, e =》 {
console.log({
location: location.href,
state: e.state
})
}, false)popstate监听函数里打印的e.state便是history.pushState()里传入的第一个参数，在这里即为{name: ’api’}
二.Hash
1.Hash基本介绍
***隐藏网址***
window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：
直接更改浏览器地址，在最后面增加或改变#hash；
通过改变location.href或location.hash的值；
通过触发点击带锚点的链接；
浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。
2.Hash实现spa前端路由代码
// 注册路由
document.querySelectorAll(’.api’).forEach(item =》 {
item.addEventListener(’click’, e =》 {
e.preventDefault();
let link = item.textContent;
location.hash = link;
}, false)
});
// 监听路由
window.addEventListener(’hashchange’, e =》 {
console.log({
location: location.href,
hash: location.hash
})
}, false)相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
vue.js怎样部署nginx案例（附代码）
从零开始操作AngularJS实现应用模块化

vue聊天室的基础静态页面搭建

效果图
HTML:

《template》

    《view class="chat"》

        《view class="chat_room"》

            《scroll-view scroll-y="true" class="chat_scroll"》

                《div class="lang_for"》

                    《!-- 消息通知 --》

                    《div class="chat_message"》

                        《div class="c_time"》2021-12-28 16:50:00《/div》

                        《div class="c_txt"》XXX处理了这条工单《/div》

                    《/div》

                    《!-- 左边 --》

                    《!-- 《div class="chat_left"》《/div》 --》

                    《!-- 右边 --》

                    《!-- 《div class="chat_right"》《/div》 --》

              《/div》

              《div class="lang_for"》

                《div class="chat_con chat_left"》

                    《image src="../../static/logo.png"》

                    《div class="message"》

                        《div class="m_time"》2021-12-28 16:50:00《/div》

                        《div class="m_con"》这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。这是一条留言，一条好长的留言。《/div》   

                    《/div》

                《/div》

              《/div》

              《div class="lang_for"》

                《div class="chat_con chat_right"》

                    《image src="../../static/logo.png"》

                    《div class="message"》

                        《div class="m_time"》2021-12-28 16:50:00《/div》

                    《div class="m_con"》这是一条留言，一条好长的留言。可以用if来判断图片文件并且展示《/div》

                《/div》

            《/div》

        《/div》

    《/scroll-view》

 《/view》

《view class="chat_send"》

        《input type="text"》

        《button》发送《/button》

《/view》

《/view》

《/template》
style:

《style lang="scss" scoped》

.chat{

.chat_room{

border-top: 1px solid #CCCCCC;

padding: 0 32rpx 10rpx;

.chat_scroll{

height:calc(100vh - 352rpx - var(--window-bottom)); //自己看着来减少

}

.lang_for{

.chat_message{

width:100%;

text-align: center;

font-size: 24rpx;

font-weight: 500;

color: #aaa;

padding: 32rpx;

box-sizing: border-box;

}

.chat_con{

display: flex;

image{

width:96rpx;

height:96rpx;

border: 1px solid #707070;

box-sizing: border-box;

border-radius: 50%;

}

.message{

margin-left:16rpx;

.m_time{

font-size: 24rpx;

color: #333333;

line-height:44rpx;

}

.m_con{

max-width: 540rpx;

min-height: 80rpx;

line-height:40rpx;

background: #FFFFFF;

border-radius: 0px 8rpx 8rpx 8rpx;

font-size:28rpx;

color: #111111;

padding:20rpx;

box-sizing: border-box;

}

}

}

.chat_left{

}

.chat_right{

flex-direction: row-reverse;

.message{

margin-right:16rpx;

.m_time{

text-align: right;

}

.m_con{

background: #9EEA6A ;

border-radius: 8rpx 0px 8rpx 8rpx;

}

}

}

}

.lang_for+.lang_for{

margin-top:10px;

}

}

.chat_send{

display: flex;

padding:48rpx 32rpx;

background:#fff;

input{

width: 520rpx;

height: 60rpx;

background: #F5F5F5;

border-radius: 8rpx;

padding:0 16rpx;

}

button{

width: 104rpx;

height: 60rpx;

line-height: 60rpx;

margin-left:32rpx;

color:#FFFFFF;

font-weight: bold;

background: #D60011;

border-radius: 8rpx;

border:none;

font-size:24rpx;

padding:0;

}

}

}

《/style》

单独的vue可以做网页吗

完全可以。

1、另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用，实现PC端单页式的前端开发。

2、PC端网站在不需要优先考虑SEO和首屏渲染时间时，单页式在用户体验和开发体验(开发效率)上是完胜多页式的。

3、vue.js作为主流框架之一，同样支持SSR，vue.js的PC端网站开发时服务端渲染编译比较慢，使用用单页式效率更高。

扩展资料：

主流框架Vue.js与angularjs的开发区别：

一、相同点：

都支持指令：内置指令和自定义指令。

都支持过滤器：内置过滤器和自定义过滤器。

都支持双向数据绑定。

都不支持低端浏览器。

二、不同点：

1、AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。

2、在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。

3、Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。