学会快速原型开发一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。快速原型

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第17天，点击查看活动详情。

快速原型开发

环境配置
- 安装 Node.js 全部使用默认的设置，一路下一步即可
- 打开命令行工具，输入命令 node –v 以及 npm -v 检查是否安装成功
- 通过命令 npm install -g @vue/cli-service-global 安装一个小工具(安装这个就可以直接运行.vue结尾的文件了)

基本使用
- 保证环境配置成功之后
- 在 .vue 文件所在的路径下打开终端输入 vue serve 文件名
- 等待解析，然后在浏览器访问出现的地址（localhost:8080）即可
  
  注意：
  1. template中必须有一个根节点
  1. script 中的 data 写成函数，内部返回一个对象
  1. 如果要使用写好的样式，直接 import 即可

播放器

使用 npm 下载别人写好的包（模块，库）

比如 axios ，下载的命令是 npm install axios 或者缩写为 npm i axios
在要使用的组件中，使用 import 导入下载的包（模块，库）

比如 axios: 导入的代码是 import axios from ‘axios’

开心的使用刚刚导入的包（模块，库）吧

<template>
  <!-- 主体区域 -->
  <section id="player">
    <!-- 输入框 -->
    <header class="header">
      <h1>
        <a href="http://www.baidu.com/">
          <!-- <img src="../assets/img/xd.png" alt="" /> -->
        </a>
        小度播放器
      </h1>
      <input
        autofocus="autofocus"
        autocomplete="off"
        placeholder="请输入歌名"
        class="new-todo"
        v-model="inputValue"
        @keyup.enter="search"
      />
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="music-list">
        <li class="music" v-for="(item, index) in results" :key="index">
          <div class="view">
            <span class="index">{{ index + 1 }}.</span>
            <label>{{ item.name }} —— {{item.artists[0].name}}</label>
            <button @click="play(item.id)" class="play"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer">
      <audio :src="url" autoplay controls></audio>
    </footer>
  </section>
</template>

<script>
  /*
    接口1:歌曲搜索
      地址:https://autumnfish.cn/search
      方法:get
      参数:keywords  搜索关键字

    接口2:获取歌曲播放地址
      地址:https://autumnfish.cn/song/url
      方法:get
      参数:id  歌曲id
  */
  import '../assets/css/player.css'
  // 导入 axios 并使用
  // 创建了一个 变量 把下载的axios 设置给他
  import axios from 'axios'
  export default {
    // 数据
    data() {
      return {
        // 双向绑定的值
        inputValue: '',
        // 搜索结果
        results: [],
        // 歌曲地址
        url: ''
      }
    },
    methods: {
      play(id) {
        axios({
          url: 'https://autumnfish.cn/song/url',
          method: 'get',
          params: {
            id // id:id
          }
        }).then(res => {
          // console.log(res)
          this.url = res.data.data[0].url
        })
      },
      // 搜索歌曲
      search() {
        axios({
          url: 'https://autumnfish.cn/search',
          method: 'get',
          params: {
            keywords: this.inputValue
          }
        }).then(res => {
          // console.log(res)
          this.results = res.data.result.songs
        })
      }
    }
  }
</script>

<style></style>

组件抽取
- 创建 components 文件夹创建一个文件叫做 player.vue
- 把播放器的代码剪切进去,并调整图片、css 文件的路径
- App.vue中使用 import 导入播放器组件
```
import player from './components/player.vue'
```
- 在 components 中添加（注册）播放器组件
```
components:{
    player// player:player
 }
```
- 页面上使用注册的名字当做标签名即可使用播放器组件
```
<player></player>
```
通过 chrome 的 vue 插件 可以更好地检查，以及调试代码

点击此处可下载

工具安装方法：

直接拖入到chrome中的更多工具扩展程序重启浏览器即可

在使用 vue 的项目中插件会自动亮起，在开发者界面中通过 vue 分栏即可使用

vue-cli（脚手架）

帮你创建项目基本结构的工具

点击查看官方介绍

环境配置
- 保证 Node.js 安装成功（输入命令确认安装成功）
- 通过命令npm install -g @vue/cli安装一个小工具
- 如果失败了，可以先输入npm install -g cnpm安装一个小工具（本质是设置国内的下载镜像）
- 成功之后，再输入cnpm install -g @vue/cli来安装脚手架工具
项目创建及运行
- 在想要创建项目的文件夹下输入vue create 项目名
- 调整一下设置（可以取消语法检查选项），回车
- 如果成功，依次输入最后出现的 提示代码
- 稍等片刻，在浏览器中输入出现的地址即可访问

文件结构
- 运行自己创建好的文件
- 重点关注src文件夹
- public目录下可以替换图标