Vue|Vue实现页面导航实战 Vue|vue.js

目录
一使用技术栈
二创建项目
三准备资源文件
四安装axios
五代码
六测试
七源码参考
一使用技术栈 1 组件及组件间传值
2 axios实现读取json数据：商品数据源存于json中
3 css相关技术进行布局：布局、间距等样式
4 使用views页面级组件，使用router设置页面
二创建项目 1 创建项目

F:\vue\proj>vue create proj

【Vue|Vue实现页面导航实战】2 选择必要组件

? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router ( ) Vuex ( ) CSS Pre-processors >( ) Linter / Formatter ( ) Unit Testing ( ) E2E Testing

3 选择history模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

4 选择使用package.json来记录

? Where do you prefer placing config for Babel, ESLint, etc.? In package.json

5 选不保存为预制项目

? Save this as a preset for future projects? (y/N) n

6 开始安装
7 运行

cd proj npm run serve

三准备资源文件 1 准备图片

文章图片

2 准备json文件
bjb.json

[ { "goodName": "联想笔记本", "img": "img/bjb/bjb1.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb2.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb3.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb4.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb5.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb6.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb7.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb8.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb9.jpg" }, { "goodName": "联想笔记本", "img": "img/bjb/bjb10.jpg" } ]

shouji.json

[ { "goodName": "华为手机", "img": "img/shouji/sj1.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj2.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj3.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj4.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj5.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj6.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj7.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj8.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj9.jpg" }, { "goodName": "华为手机", "img": "img/shouji/sj10.jpg" } ]

四安装axios

cnpm i axios -S

五代码 1 创建首页First.vue

* { padding: 0; margin: 0; }.left { width: 100px; float: left; margin-right: 10px; }.right { width: 1000px; float: left; margin-left: 10px; }.main { width: 1200px; margin: 20px auto; }.top img { height: 200px; width: 1000px; }.left, .right { background-color: #f5f5f5; height: 660px }

2创建路由文件index.js

import Vue from 'vue' import VueRouter from 'vue-router' // 不用系统默认主页，而是自定义主页 // import Home from '../views/Home.vue' // 引入主页 import First from '../views/First.vue'Vue.use(VueRouter) // 主页路由 const routes = [ { path: '/', component: First }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') } ]const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })export default router

3 App.vue

#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; }#nav { padding: 30px; }#nav a { font-weight: bold; color: #2c3e50; }#nav a.router-link-exact-active { color: #42b983; }

4 左边导航组件left.vue

.title { width: 100px; color: red; }.menu { padding-inline-start: 0px; }.menu li { list-style: none; height: 50px; margin-bottom: 2px; background-color: white; line-height: 50px; /* 改变鼠标指针为手形形状 */ cursor: pointer; }

5 事件总线Msg.js，用于同级组件传值

// 事件总线文件是js文件，不是vue文件 importVue from 'vue' export defaultnew Vue

6 右边内容组件Right.vue

7 main.js

import Vue from 'vue' import App from './App.vue' import router from './router' // 引入 axios import axios from 'axios' // 全局注册 axios Vue.prototype.$http = axios Vue.config.productionTip = falsenew Vue({ router, render: h => h(App) }).$mount('#app')

8 商品列表组件GoodList.vue

.goodList li { width: 190px; height: 190px; list-style: none; float: left; font-size: 9px; color: red; margin-bottom: 30px; }.goodList img { width: 180px; height: 180px; }