vue酷狗音乐实战开发—1-酷狗音乐的需求，路由设计和mint-ui安装

这个项目主要实现下面这个功能

1.学前了解

前置知识

 技术栈

搭建项目

执行

npm i vue-cli -g

vue init webpack mint-vue

npm install(下载包)

然后启动项目 npm  run dev 

注意，因为eslint检查比较严格，可以禁掉

https://blog.csdn.net/qq_15869645/article/details/79521900

项目的准备

 

 项目需求

第三方组件库安装使用

安装

npm i mint-ui -S

在main.js相应引入该组件（具体引入方式看上面）

然后测试一下是否引入成功

 然后打开项目，看这个header是否引入成功

路由设计

现在开始配置路由

写几个界面

 

两种共用的bar

 

App.vue

 

router/index.js里面

import Vue from 'vue'
import Router from 'vue-router'
import NewSong from '@/views/new-song/new-song'
import Rank from '@/views/rank/rank'
import Search from '@/views/search/search'
import NavBar from '@/components/nav-bar'
import SearchBar from '@/components/search-bar'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'NewSong',
      components: {
        nav: NavBar,
        default: NewSong
      }
    },
    {
      path: '/rank',
      name: 'Rank',
      components: {
        nav: NavBar,
        default: Rank
      }
    },
    {
      path: '/search',
      name: 'Search',
      components: {
        nav: SearchBar,
        default: Search
      }
    }
  ]
})

 测试