本站开发流程以及结构布局
cnpm i [email protected] -S
cnpm i uiv -S
cnpm i less less-loader -S
cnpm i prismjs -S
cnpm i vue-prism -S
cnpm i vue-router -S
cnpm i vue-totop -S
cnpm i vue-video-player -S1.bootstrap3.3.7的css
2.uiv是Vue版的BootStrap
3.less快速使用css
4.prismjs带的css
5.vue-prism用于局部安装
6.router链接
7.totop返回顶部
8.vue-video音乐播放器（首页的微软广告）
框架中的src分布
—— assets:
img > N.img(无数个图片)
—— components:
nav.vue
footer.vue
swiper.vue
scroll.js
—— router:
index.js
—— views:
Home.vue
index.vue
money.vue
application.vue
study.vue
me.vue
more.vue
mores >
mx.vue
prism.vuemain.js
//Uiv的bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
import * as uiv from 'uiv'
Vue.use(uiv)
//Scroll鼠标完美滑动 犹如120Hz的手机
import "./components/scroll.js"
router排序
Home的子组件默认是index
[
{
path: '/',
component: () => import('../views/Home.vue'),
redirect: "/index",
children: [{
path: '/index',
component: () => import('../views/index.vue')
},
{
path: '/money',
component: () => import('../views/money.vue')
},
{
path: '/home',
component: () => import('../views/index.vue')
},
{
path: '/app',
component: () => import('../views/application.vue')
},
{
path: '/lookMe',
component: () => import('../views/me.vue')
},
{
path: '/study',
component: () => import('../views/study.vue')
},
{
path: '/more',
component: () => import('../views/more.vue')
}
]
},
{
path:"/mx",
component:()=>import("../views/mores/mx.vue")
},
{
path:"/prism",
component:()=>import("../views/mores/prism.vue")
}
]App.vue
上面#loading是用来遮挡加载的，我的GIF/30kb基本足够遮挡5秒动画。
下面的router显示主路径Home
（用Home是为了把顶部导航和最底部的footer分开）
下面就会说明加载以及防偷防拖拽:
当前的动画是true(显示的)
刷新自动加载loading事件：a等于0，开始定时5秒，当a等于5时动画false(不显示)
created加载成功就将所有鼠标和托转停止
data() {
return {
isTure: true
}
},
mounted() {
this.loading()
},
methods: {
loading() {
var a = 0;
setInterval(() => {
a++
if (a >= 5) {
this.isTure = false
}
}, 1000)
}
},
created() {
document.oncontextmenu = function(e) {
return false;
};
//禁止文字复制
document.onselectstart = function() {
return false;
};
//禁止鼠标拖动图片
document.ondragstart = function() {
return false;
};
//IE不支持
document.oncopy = function() {
return false;
};
}
}Home.vue
home三样东西
1.导航和尾页
2.keep-alive缓存:
导航一切换就加载一次。必须有切换才有效。在App.vue无效
这里只需要添加router-view就能任意切换
3.totop返回顶部
(详情请看:https://segmentfault.com/a/11...
index.vue
首页重要的就三点
1.swiper的使用:单独一个页面引入swiper，然后在index插进去。易管理
import Vue from 'vue'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
require('swiper/dist/css/swiper.css')
2.必须要加Vue from 'vue'！！不然vue-video无效
3.vue-video必须引入这两个css，百度多个文章完全无效。
import swiper from "../components/swiper.vue"
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
export default { ... }money.vue
三张付款吗，用来交易使用！基于bootstrap的响应式
col-lg-6 大屏两张图左右各6格
col-md-6 中屏两张图左右各6格
col-xs-12 移动每个都是12格
app.vue
两点：
1.v-for遍历:那样可以用数据遍历20几个还可以放自己的下载链接
2.过滤器:因为我的item.txt是介绍用的，文字太多！希望30个字就够了！此时我们在{{}}中加一个 | newTxt
而这个val其实就是你原本的所有文本。重点来了：一定要return才行。我居然因为忘了return浪费2小时！罪该万死！死不足惜！西瓜真甜....跑题了。最后就是slice(0, 30)。slice就是从0开始，到30往后全部要。
{{item.txt | newxt}}
filters: {
newTxt(val) {
return val.slice(0, 30) + '...'
}
}study.vue
有用的只有一个学习点:
我遍历的是图片，图片路径都是相同的:
mxlogo.com/img1.jpg
mxlogo.com/img2.jpg
...
mxlogo.com/img100.jpg
此时我们遍历只需要单独做一个src，然后图片用key来排序遍历。加1是因为key是从0开始，我的图从1开始。记得要加.JPG
![]()
data(){
return{
src: "http://cdn.mxlogo.com/show"
}
}Me.vue
静态也可以留言！我用了一个formspree。你只需要进去注册，然后给你固定的值放到form上就行了,name=""决定了你输入的值
https://formspree.io/register
More.vue
这里的知识点:
1.display:flex详情在我的Git里。
http://mxlogo.gitee.io/flex_i...
2.keyup和click并存。keyup只有按enter才会成功返回事件
3.location，有了他百度和你是一家。
当点击回车location将跳转到s?wd='你刚才输入的那个文本'
input type="text"
placeholder="百度一下..."
v-model="txt"
@keyup.enter="ck" />
button @click="ck">搜索
methods: {
ck() {
location.href = 'https://www.baidu.com/s?wd='+this.txt
}
}