本文共 1006 字，大约阅读时间需要 3 分钟。

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

1.学前了解

前置知识

 技术栈

搭建项目

执行

npm i vue-cli -g

vue init webpack mint-vue

npm install(下载包)

然后启动项目 npm  run dev 

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

项目的准备

 项目需求

第三方组件库安装使用

安装

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      }    }  ]})

 测试