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组件的基本结构：

1. 后缀为.vue

2. <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>

访问：