Vue实现页面导航实战

目录

一 使用技术栈

二 创建项目

三 准备资源文件

四 安装axios

五 代码

六 测试

七 源码参考

---

一 使用技术栈

1 组件及组件间传值

2 axios实现读取json数据：商品数据源存于json中

3 css相关技术进行布局：布局、间距等样式

4 使用views页面级组件，使用router设置页面

二 创建项目

1 创建项目

F:\vue\proj>vue create proj

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

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

4 左边导航组件left.vue

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

// 事件总线文件是js文件，不是vue文件
import  Vue from 'vue'
export default  new 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 = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

8 商品列表组件GoodList.vue

六 测试

七 源码参考

https://gitee.com/cakin24/prog