vue2.0音乐app项目笔记

前言：

最近在学vue2.0知识，这里把项目笔记整理一下（支持慕课正版视频），同时也给自己这段时间的学习留下记忆。

1.运行环境配置

全局安装vue-cli

$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack vueMusic
$ cd vueMusic
$ npm install
$ npm run dev
首先初始化项目

这里注意name名称小写

这里ESlint初学者可以选择否

2.项目文件与页面框架配置

按照上图依次建立文件目录，使整个框架清晰。

（1）.eslintrc配置：

    'eol-last': 0,    'space-before-function-paren': 0

（2）package中插件安装：

需要安装三个插件

main.js

import 'babel-polyfill'import Vue from 'vue'import App from './App'import router from './router'import fastclick from 'fastclick'import '@/common/stylus/index.styl'Vue.config.productionTip = falsefastclick.attach(document.body)/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

需要安装：

npm install stylus stylus-loader  --save-dev

（3）webpack.prod.conf.js配置

 resolve: {    extensions: ['.js', '.vue', '.json'],    alias: {      'vue$': 'vue/dist/vue.esm.js',      '@': resolve('src'),      'common': resolve('src/common'),      'components': resolve('src/components'),      'base': resolve('src/base'),      'api': resolve('src/api')    }  },

（4）路由配置：

import Vue from 'vue'import Router from 'vue-router'import Recommend from '@/components/recommend/recommend'import Singer from '@/components/singer/singer'import Rank from '@/components/rank/rank'import Search from '@/components/search/search'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      redirect: '/recommend'    },    {      path: '/recommend',      component: Recommend    },    {      path: '/singer',      component: Singer    },    {      path: '/rank',      component: Rank    },    {      path: '/search',      component: Search    }  ]})

（5）组件配置：

<template>  <div id="app">    <!--<img src="./assets/logo.png">-->    <!--<router-view></router-view>-->    <m-header></m-header>    <tab></tab>    <router-view></router-view>  </div></template><script type="text/ecmascript-6">  import MHeader from '@/components/m-header/m-header'  import Tab from '@/components/tab/tab'  export default {    components: {      MHeader,      Tab    }  }</script><style scoped lang="stylus" rel="stylesheet/stylus"></style>

tab.vue

<template>  <div class="tab">    <router-link tag="div" class="tab-item" to="/recommend">      <span class="tab-link">推荐</span>    </router-link>    <router-link tag="div" class="tab-item" to="/singer">      <span class="tab-link">歌手</span>    </router-link>    <router-link tag="div" class="tab-item" to="/rank">      <span class="tab-link">排行      </span>    </router-link>    <router-link tag="div" class="tab-item" to="/search">      <span class="tab-link">搜索</span>    </router-link>  </div></template><script type="text/ecmascript-6">  export default {}</script><style scoped lang="stylus" rel="stylesheet/stylus">  @import "~common/stylus/variable"  .tab    display: flex    height: 44px    line-height: 44px    font-size: $font-size-medium    .tab-item      flex: 1      text-align: center      .tab-link        padding-bottom: 5px        color: $color-text-l      &.router-link-active        .tab-link          color: $color-theme          border-bottom: 2px solid $color-theme</style>

（6）index.html配置

<meta name="viewport"          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">