1.项目实战-vue-cli实现web音乐APP-项目初始化
web音乐APP这个项目用到的主要技术栈 为 (vue、vue/cli、axios、vue-router、better-scroll插件、Swiper插件)。
vuecli方便进行工程搭建的一个架子。他里面用到了很多vue基础的语法。
一、要用vuecli，他是基于node的，你需要有node的运行环境（如果没有，需要安装node环境）。
二、在本地需要安装vuecli脚手架构建工具。
三、创建放置项目的目录。在项目目录里面，打开cmd窗口，
初始化项目
输入vue init webapck musicapp
下载一些需要的依赖
四、启动项目
cd进入到项目中，查看项目的工程目录
工程目录如下所示：
启动项目 npm run dev
我们开发的目录主要在src目录下面，如下所示：
vue/cli项目结构
assets一般是一些静态资源
components所用到的组件
router路由
App.vue入口的组件
main.js入口文件
----
首先从main.js起始，进行了new Vue() 的渲染。根实例的vue渲染，会指明一个组件App.vue
main.js入口文件，说明如下所示：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
/*
引入vue模块
import Vue from 'vue'
引入App.vue组件
import App from './App'
引入router，路由文件
import router from './router'
*/
import Vue from 'vue'
import App from './App'
import router from './router'
// 特定模式下，他的配置信息是否正确
Vue.config.productionTip = false
/* eslint-disable no-new */
/*
进行vue实例化过程，配置参数分别表示：
el表示挂载元素
router上面引入的router，路由配置
components组件--所以vue实例的组件，都写在这个{ App }对象当中
template模板--组件默认的模板
*/
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})vue实例化完成之后，会 进入到App.vue这个里面来，（直接从main.js 关联到 App.vue 组件文件）。
在App.vue 文件中，我们可以看到vue组件的基本结构：
后缀为.vue
<template></template>标记，组件的模板，内部一般会有一个根节点<div></div>
如下所示：
<template> <div> </div> </template>
3.script组件的脚本部分（业务逻辑部分）
<script></script>
<script>
export default {
name: 'App'
}
</script>4.style标记内部，组件涉及到的样式
<style> </style>
components组件文件夹中的vue组件
HelloWorld.vue 与 App.vue的关系，通过main.js中的路由router，可以看下router目录下index.js里相应的内容，
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
// new Router()它定义一个Router的实例
export default new Router({
routes: [
{
// router当中，会指明它路由的配置信息
// 当是 斜杠/的时候，访问到的是HelloWorld这个组件
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})HelloWorld.vue这个组件，会添加到App.vue，它的<router-view/>这个位置，<router-view/> 的作用：路由匹配到的组件
<!-- 路由匹配到的组件将显示在这里 -->
<router-view/>
或
<router-view></router-view>
vue/cli路由
<router-view/> 是以占位符的形式来出现的！这个位置被HelloWorld.vue里面的内容替换了。
那么HelloWorld.vue 是怎么实现 把App.vue中的<router-view/>替换的呢？
其实，还是要 归根到 main.js这个文件里面来，
在main.js里面，我们一开始进行 vue实例化的过程，并且挂载的过程中，提供了一个参数叫router
而 这个router，来源于router文件夹下index.js这个文件。
他里面进行了一个路由的实例化
其实，你可以简单理解为，路由的概念--就是一个 “指向”！
当它的path是/ 斜杠的时候，它指向的组件就指向的HelloWorld，
path: '/', name: 'HelloWorld', component: HelloWorld
那 自然 就会用HelloWorld来替换<router-view/>这个占位符！
调整HelloWorld.vue组件中的内容，
查看预览效果：
创建一个Home.vue组件
<template>
<div class="home">
home
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
}
}
}
</script>
<style scoped>
.home{
font-size:40px;
color: red;
}
</style>router目录下，index.js文件中，配置组件的路由
import Home from '@/components/Home'
export default new Router({
routes: [
{
// router当中，会指明它路由的配置信息
// 当是 斜杠/的时候，访问到的是HelloWorld这个组件
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'Home',
component: Home
}
]
})App.vue
<template> <div id="app"> <router-link to="/home">home</router-link> <img src="./assets/logo.png"> <router-view/> </div> </template>
访问：
