目錄
百度網盤源代碼
https://pan.baidu.com/s/1t47o6mXfFDjLoDNod0Tk1w
my-sz-one項目CLI創建
◆ 前提依賴構建
-
1、router-view
npm install vue-router --save
-
2、ajax(菜鳥教程)
npm install vue-resource --save
// Vue.use(VueResource)之後,從而在所有vue組件中使用this.$http.get/post...(.then請求完畢之後執行)
/*
export default {
created: function() {
// 帶參數 -- this.$http.get('getList',{userId:123}).then(function(data) {
this.$http.get('getList').then(function(data) {
// 成功的回調
console.log(data)
}, function(error) {
// 失敗的回調
console.log(error)
})
},
......
*/
3、typicode/json-server
爲了方便和後端調試,在前端設置rmokedata一個假的Restful數據,將前端所有的ajax數據放到一個文件裏面
使用typicode/json-server步驟如下:
- 安裝
npm install npm json-server --save -- 或者 npm install -g json-server
- mokedata是適用於測試服,所以要在bulid文件夾的../build/webpack.dev.conf.js中添加
// server.js const jsonServer = require('json-server') const server = jsonServer.create() const router = jsonServer.router('db.json') const middlewares = jsonServer.defaults() server.use(middlewares) server.use(router) server.listen(3000, () => { console.log('JSON Server is running') })
- 注意db.json和index.html同級別,此時執行npm run dev發現啓動成功
- 查看是否該項目下的json-server可用
- 1 如果已經配置了db.json的內容,然後在該項目(必須要有db.json文件)下執行
json-server --watch db.json
如下圖所示:
則表示成功讀取json信息我們就可以使用啦!!!使用json-server教程。
-
4、json-server文章
◆ 基礎項目構建
- 1 創建實戰項目(注意:千萬不要配置語法檢查)
vue init webpack my-sz-one
- 2 基本頁面搭建如下圖所示
- /src/components/layout.vue(注意:scope)
<!-- layout.vue -->
<template>
<div>
<div class="app-header">header</div>
<div class="app-content">content</div>
<div class="app-footer">footer</div>
</div>
</template>
<script>
</script>
<style scope>
</style>
- /src/main.js
引入Layout組件,template: '<Layout>'直接渲染變成最外層,同時修改根組件爲Layout { Layout }
/* main.js */
import Vue from 'vue'
import App from './App'
import router from './router'
import Layout from './components/layout'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { Layout },
template: '<Layout>'
})
- npm run dev 顯示正確
my-sz-one項目內容實現
◆ 首頁三要素(header、content、footer)
➊ header
- header部分搭建成如下,css和header部分大家直接粘貼就好
<!-- layout.vue -->
<template>
<div>
<div class="app-head">
<div class="app-head-inner">
<router-link :to="{path: '/'}">
<img src="../assets/logo.png">
</router-link>
<div class="head-nav">
<ul class="nav-list">
<li> {{ username }}</li>
<li v-if="username!== ''" class="nav-pile">|</li>
<li v-if="username!== ''">退出</li>
<li v-if="username=== ''"
<li class="nav-pile">|</li>
<li v-if="username=== ''"
<li v-if="username=== ''">|</li>
<li>關於</li>
</ul>
</div>
</div>
</div>
<div class="container">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
<div class="app-foot">
<p>© 2016 fishenal MIT</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
isShowAboutDialog: false,
isShowLogDialog: false,
isShowRegDialog: false,
username: ''
}
},
}
</script>
<style>
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: inherit;
text-decoration: none;
}
body {
background: #f0f2f5;
font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
font-size: 14px;
color: #444;
}
.app-head {
background: #363636;
color: #b2b2b2;
height: 90px;
line-height: 90px;
width: 100%;
}
.app-head-inner {
width: 1200px;
margin: 0 auto;
}
.head-logo {
float: left;
}
.app-head-inner img {
width: 50px;
margin-top: 20px;
}
.head-nav {
float: right;
}
.head-nav ul {
overflow: hidden;
}
.head-nav li {
cursor: pointer;
float: left;
}
.nav-pile {
padding: 0 10px;
}
.app-foot {
text-align: center;
height: 80px;
width: 100%;
line-height: 80px;
background: #e3e4e8;
clear: both;
margin-top: 30px;
}
.container {
width: 1200px;
margin: 0 auto;
}
.hr {
height: 1px;
width: 100%;
background: #ddd;
}
.button {
background: #4fc08d;
color: #fff;
display: inline-block;
padding: 10px 20px;
cursor: pointer;
}
.button:hover {
background: #4fc08d;
}
.g-form {
}
.g-form-line {
padding: 15px 0;
}
.g-form-label {
width: 100px;
font-size: 16px;
display: inline-block;
}
.g-form-input {
display: inline-block;
}
.g-form-input input {
height: 30px;
width: 200px;
line-height: 30px;
vertical-align: middle;
padding: 0 10px;
border: 1px solid #ccc;
}
.g-form-btn {
padding-left: 100px;
}
.g-form-error {
color: red;
padding-left: 15px;
}
</style>
➋ content部分實現(包含detail、index)
- 1 我們要用到router-view和ajax所以先要安裝路由和vue-resource,則需要執行下面的命令:
npm install vue-router --save
npm install vue-resource --save
- 2 到main.js進行vue-router的配置(實例化VueRouter、router的Map、引入detail.vue、index.vue文件、router根節點配置【如果在new Vue(已經有router則忽略最後一步)】)
......
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(VueRouter)
Vue.use(VueResource)
......
/* main.js */
import Vue from 'vue'
import Layout from './components/layout'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
/* 引入頁面依賴 */
import IndexPage from './pages/index'
import DetailPage from './pages/detail'
Vue.use(VueRouter)
Vue.use(VueResource)
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/',
component: IndexPage
}, ]
})
new Vue({
el: '#app',
router,
template: '<Layout/>',
components: {
Layout
}
})
- 3 創建page目錄,並且編寫detail.vue、index.vue兩個vue組件
- Ⅰ /src/pages/index.vue
<template>
<div>
index.vue
</div>
</template>
<script>
</script>
<style>
</style>
- Ⅱ index.vue(詳細)☾:key="key"☽
<template>
<div class="index-wrap">
<div class="index-left">
<div class="index-left-block">
<h2>全部產品</h2>
<template v-for="product in productList">
<h3>{{ product.title}}</h3>
<ul>
<li v-for="item in product.list">
<a :href="item.url">{{ item.name }}</a>
<span v-if="item.hot" class="hot-tag">HOT</span>
</li>
</ul>
<div v-if="!product.last" class="hr"></div>
</template>
</div>
<div class="index-left-block lastest-news">
<h2>最新消息</h2>
<ul>
<li v-for="item in newsList">
<a :href="item.url" class="new-item">{{ item.title }}</a>
</li>
</ul>
</div>
</div>
<div class="index-right">
<div class="index-board-list">
<div class="index-board-item" v-for="(item, index) in boardList" :class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]">
<div class="index-board-item-inner">
<h2>{{ item.title }}</h2>
<p>{{ item.description }}</p>
<div class="index-board-button">
<router-link class="button" :to="{path: 'detail/' + item.toKey}">立即購買</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
invTime: 2000,
slides: [{
src: require('../assets/slideShow/pic1.jpg'),
title: 'xxx1',
href: 'detail/analysis'
},
{
src: require('../assets/slideShow/pic2.jpg'),
title: 'xxx2',
href: 'detail/count'
},
{
src: require('../assets/slideShow/pic3.jpg'),
title: 'xxx3',
href: 'http://xxx.xxx.com'
},
{
src: require('../assets/slideShow/pic4.jpg'),
title: 'xxx4',
href: 'detail/forecast'
}
],
boardList: [{
title: '開放產品',
description: '開放產品是一款開放產品',
id: 'car',
toKey: 'analysis',
saleout: false
},
{
title: '品牌營銷',
description: '品牌營銷幫助你的產品更好地找到定位',
id: 'earth',
toKey: 'count',
saleout: false
},
{
title: '使命必達',
description: '使命必達快速迭代永遠保持最前端的速度',
id: 'loud',
toKey: 'forecast',
saleout: true
},
{
title: '勇攀高峯',
description: '幫你勇闖高峯,到達事業的頂峯',
id: 'hill',
toKey: 'publish',
saleout: false
}
],
newsList: [],
productList: {
pc: {
title: 'PC產品',
list: [{
name: '數據統計',
url: 'http://starcraft.com'
},
{
name: '數據預測',
url: 'http://warcraft.com'
},
{
name: '流量分析',
url: 'http://overwatch.com',
hot: true
},
{
name: '廣告發布',
url: 'http://hearstone.com'
}
]
},
app: {
title: '手機應用類',
last: true,
list: [{
name: '91助手',
url: 'http://weixin.com'
},
{
name: '產品助手',
url: 'http://twitter.com',
hot: true
},
{
name: '智能地圖',
url: 'http://maps.com'
},
{
name: '團隊語音',
url: 'http://phone.com'
}
]
}
}
}
}
}
</script>
<style scoped="scoped">
.index-wrap {
width: 1200px;
margin: 0 auto;
overflow: hidden;
}
.index-left {
float: left;
width: 300px;
text-align: left;
}
.index-right {
float: left;
width: 900px;
}
.index-left-block {
margin: 15px;
background: #fff;
box-shadow: 0 0 1px #ddd;
}
.index-left-block .hr {
margin-bottom: 20px;
}
.index-left-block h2 {
background: #4fc08d;
color: #fff;
padding: 10px 15px;
margin-bottom: 20px;
}
.index-left-block h3 {
padding: 0 15px 5px 15px;
font-weight: bold;
color: #222;
}
.index-left-block ul {
padding: 10px 15px;
}
.index-left-block li {
padding: 5px;
}
.index-board-list {
overflow: hidden;
}
.index-board-item {
float: left;
width: 400px;
background: #fff;
box-shadow: 0 0 1px #ddd;
padding: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.index-board-item-inner {
min-height: 125px;
padding-left: 120px;
}
.index-board-car .index-board-item-inner {
background: url(../assets/images/1.png) no-repeat;
}
.index-board-loud .index-board-item-inner {
background: url(../assets/images/2.png) no-repeat;
}
.index-board-earth .index-board-item-inner {
background: url(../assets/images/3.png) no-repeat;
}
.index-board-hill .index-board-item-inner {
background: url(../assets/images/4.png) no-repeat;
}
.index-board-item h2 {
font-size: 18px;
font-weight: bold;
color: #000;
margin-bottom: 15px;
}
.line-last {
margin-right: 0;
}
.index-board-button {
margin-top: 20px;
}
.lastest-news {
min-height: 512px;
}
.hot-tag {
background: red;
color: #fff;
}
.new-item {
display: inline-block;
width: 230px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
- Ⅲ/src/pages/detail.vue
<template>
<div>
detail
</div>
</template>
<script>
</script>
<style>
</style>
- Ⅳ detail.vue(詳細)
<!-- detail.vue -->
<template>
<div class="detail-wrap">
<div class="detail-left">
<div class="product-board">
<img :src="productIcon">
<ul>
<!-- <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
{{ item.name }}
</router-link> -->
</ul>
</div>
</div>
<div class="detail-right">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
export default {
data () {
return {
products: [
{
name: '數據統計',
path: 'count',
icon: require('../assets/images/1.png'),
active: false
},
{
name: '數據預測',
path: 'forecast',
active: false
},
{
name: '流量分析',
path: 'analysis',
active: false
},
{
name: '廣告發布',
path: 'publish',
active: false
}
],
imgMap: {
'/detail/count': require("../assets/images/1.png"),
'/detail/forecast': require("../assets/images/2.png"),
'/detail/analysis': require("../assets/images/3.png"),
'/detail/publish': require("../assets/images/4.png")
}
}
},
computed: {
productIcon () {
return this.imgMap[this.$route.path]
}
}
}
</script>
<style scoped="scoped">
.detail-wrap {
width: 1200px;
margin: 0 auto;
overflow: hidden;
padding-top: 20px;
}
.detail-left {
float: left;
width: 200px;
text-align: center;
}
.detail-right {
float: left;
width: 980px;
margin-left: 20px;
}
.product-board {
background: #fff;
padding: 20px 0;
}
.product-board ul {
margin-top: 20px;
}
.product-board li {
text-align: left;
padding: 10px 15px;
cursor: pointer;
}
.product-board li.active,
.product-board li:hover {
background: #4fc08d;
color: #fff;
}
.product-board li a {
display: block;
}
.sales-board {
background: #fff;
}
.sales-board-form {
}
.sales-board-intro h2 {
font-size: 20px;
padding: 20px;
}
.sales-board-intro p {
background: #f7fcff;
padding: 10px 20px;
color: #999;
line-height: 1.8;
}
.sales-board-form {
padding: 30px 20px;
font-size: 14px;
}
.sales-board-line {
clear: both;
padding-bottom: 20px;
}
.sales-board-line-left {
display: inline-block;
width: 100px;
}
.sales-board-line-right {
display: inline-block;
width: 75%;
}
.sales-board-des {
border-top: 20px solid #f0f2f5;
padding: 15px 20px;
}
.sales-board-des p {
line-height: 1.6;
}
.sales-board-des h2 {
font-size: 20px;
padding-bottom: 15px;
}
.sales-board-des h3 {
font-size: 18px;
font-weight: bold;
padding: 20px 0 10px 0;
}
.sales-board-des li {
padding: 5px 0;
}
.sales-board-table {
width: 100%;
margin-top: 20px;
}
.sales-board-table th {
background: #4fc08d;
color: #fff;
}
.sales-board-table td {
border: 1px solid #f0f2f5;
padding: 15px;
}
</style>
- Ⅴ 最終效果
◆ 語法小總結
-
v-for
對於循環我們可以利用div或者template做循環:
<template v-for="item in List">
{{item}}
</template>
-
:class
對於樣式支持數組和對象的形式
- 1 後者爲真,則顯示該css
:class="{'line-last' : index % 2 !== 0}"
- 2 爲數組,並且支持字符串拼接
:class="[{'line-last' : index % 2 !== 0}, 'index-board-' + item.id]"
➌ footer 略