vue2.0音乐app项目笔记
2017-09-24 14:44
537 查看
前言:
最近在学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 = false fastclick.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 9376 : '/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">
相关文章推荐
- Android笔记之:App自动化之使用Ant编译项目多渠道打包的使用详解
- 手机影音项目笔记(三)---音乐播放的处理
- 笔记:imooc-vue 音乐app
- 音乐社交APP源码项目
- 音乐社交APP源码项目
- 一个APP在不同的项目中适配的一些笔记(支持多种屏幕)
- 手机影音项目笔记(四)---音乐播放歌词的控件的自定义
- 【Web】vue2.0音乐APP实战中的知识点总结(二)
- 【WEB】Vue2.0音乐APP实战中的知识点总结(三)
- iOS开发之内购完全笔记(您已购买此 App 内购买项目。此项目将免费恢复。)
- Android笔记之:App自动化之使用Ant编译项目多渠道打包的使用详解
- 带大三个hybird app项目的设计管理笔记
- PicList2&nbsp;App项目笔记(一)…
- Android项目笔记【送餐app】01 首页的功能
- 【WEB】Vue2.0音乐APP实战中的知识点总结(四)
- Android项目笔记【项目管理统计图app】:使用github上的cardslib开源项目实现CardView(1)
- iOS开发之内购完全笔记(您已购买此 App 内购买项目。此项目将免费恢复。)
- Android笔记之:App自动化之使用Ant编译项目多渠道打包的使用详解