vue-cli3文件的引入

在vue-cli中引入图片、音乐等文件，如下：

<template>
  <!--组件结构  -->
  <div id="app">
    <!--template是该组件的模板结构,里边必须有一个div标签，且是包裹的(即template里边必须有一个大的副盒子)-->


    <h3>{{msg}}</h3>
    <ul v-for="(item,index) in items">
  <li>{{item}}</li>
    </ul>

    <img :src="logoSrc" alt="">
<!--图片可以直接显示，audio标签直接引入1.mp3无法播放，因与图片编译不一样，mp3是16进制;
      mp3显示不出来怎么办？？？
      webpack可以将文件直接编译成模块(webpack不仅可以编译html、css、js,还可以将audio、radio等图片字体打包编译)因此可以把1.mp3当成模块,
通过'import * from &'导入(从&引入文件*),把1.mp3当成可重用的模块,在任何地方都可导入-->
<!--注：1.在组件里写代码的时候，不要直接"./"引入文件
2.1.mp3不会放在本地，一般在数据库中，data与数据库有关,即类似audio1的命名都会放在data中，然后直接绑定属性渲染就可以
3.以后在导入一些本地文件时，一定要import引入-->
    <audio :src="audioSrc" autoplay="" controls=""></audio>

  </div>
</template>


  <!--<script>标签里边是该组件的DOM操作，处理业务逻辑；type不要写 -->
<script>

  // <!-- 把1.mp3当成可重用的模块，在任何地方都可导入，
  // audio1此时是变量名 -->
    import logoSrc from './assets/logo.png'
    import audio1 from "./assets/1.mp3" 

     // 抛出当前的对象，因为main.js有import App from './App.vue',所以我们必须在当前的组件中export default;
  export default{
    

    // name没有意义，是标识的，为了测试用,（这个组件,给他一个名字叫App，可以一眼定位他叫App）
    // 一个组件的命名首字母必须大写(如App.vue)
     name:'App',

     //一个组件中的data必须是一个函数,要有返回值，返回空对象也是返回值，结构data(){return{}},return一个对象
     data(){
      return{
        msg:'hello 组件结构',
        items: ["宫保鸡丁","回锅肉","糖醋排骨"],


 // 可以将audio1绑定在data中,audio1、logoSrc不加引号
        logoSrc:logoSrc,
        audioSrc: audio1

      } 
    }

  }
 
</script>

<style>
  /*该组件的样式属性*/
</style>