单文件组件

一、单文件组件

　　1、什么是vue文件

　　　　.vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

　　2、.vue文件的组成部分

　　　　1、.vue文件由三部分组成：<template>、<style>、<script>
       　　 　　　　<template>
          　　　　　　  html//写响应的html代码
      　　  　　　　</template>

       　　　　　　 <style>
      　　　　　　      css//写响应的css代码
      　　　　　　  </style>

      　　　　　　  <script>
      　　　　　　      js//写响应的js代码
      　　　　　　  </script>

　　3、vue-loader 

　　　　1、浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader

　　　　2、类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等

　　　　3、需要注意的是vue-loader是基于webpack的 ,所以要想用  vue-loader必须先安装webpack。

　　4、 webpack

　　　　1、webpack是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理

　　　　2、实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件

　　　　3、简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出

　　　　4、 [官网](http://webpack.github.io/)      webpack版本：v1.x v2.x

　　　　5、 webpack有一个核心配置文件：webpack.config.js，必须放在项目根目录下

　　5、示例，步骤：

　　　　1、创建项目，目录结构 如下：
　　　　　　webpack-demo    项目文件名称
   　　　　　　 |-index.html    网页主文件
  　　　　　　  |-main.js   入口文件       
　　　　　　    |-App.vue   vue文件
　　　　　　    |-package.json  工程文件，不需要手动建立 ，直接在项目目录下npm init --yes 初始化就可以了
　　　　　　    |-webpack.config.js  webpack配置文件
　　　　　　    |-.babelrc   Babel配置文件

　　　　2、 编写App.vue（vue文件之间可以相互导入，就相当于父组件，子组件）

<template>
    <div class="user">
        <h2>用户列表</h2>
        <ul>
            <li v-for="value in users">{{value}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                users:['tom','jack','mike','alice']
            }
        }
    }
</script>

<style scoped> /* scoped表示该样式只在当前组件中有效 */
    h2{
        color:red;
    }
</style>

app文件