单文件组件

1、单文件组件

　　一、什么是vue文件

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

　　二、.vue文件的组成部分

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

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

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

　　三、vue-loader 

　　　　一、浏览器自己并不认为.vue文件，因此必须对.vue文件进行加载解析，此时须要vue-loader

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

　　　　三、须要注意的是vue-loader是基于webpack的 ,因此要想用  vue-loader必须先安装webpack。

　　四、 webpack

　　　　一、webpack是一个前端资源模板化加载器和打包工具，它可以把各类资源都做为模块来使用和处理

　　　　二、实际上，webpack是经过不一样的loader将这些资源加载后打包，而后输出打包后文件

　　　　三、简单来讲，webpack就是一个模块加载器，全部资源均可以做为模块来加载，最后打包输出

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

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

　　五、示例，步骤：

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

　　　　二、 编写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文件

 

<template>
    <div id="itany">
        <h1>welcome</h1>
        <h2 @click="change">{{name}}</h2>

        <User></User>
    </div>
</template>

<script>

    //导入模块
    import User from './components/User.vue'

    // console.log(111);
    export default {
        data(){
            return {
                name:'tom'
            }
        },
        methods:{
            change(){
                this.name='汤姆';
            }
        },
        components:{
            User
        }
    }
</script>

<style>
    body{
        background-color:#ccc;
    }
</style>

vue文件

　　　　三、安装相关模板    

　　　　　　 cnpm install vue -S                      //package.json文件内就有响应的数据了
    　　　　　cnpm install webpack -D             //-D表示的是--save-dev
    　　　　　cnpm install webpack-dev-server -D//静态资源服务器
    　　　　　cnpm install vue-loader -D
    　　　　　cnpm install vue-html-loader -D
  　　　　      cnpm install css-loader -D
  　　　　　  cnpm install vue-style-loader -D
  　　　　　  cnpm install file-loader -D

  　　　　　 cnpm install babel-loader -D
　　　　　　cnpm install babel-core -D
 　　　　　  cnpm install babel-preset-env -D  //根据配置的运行环境自动启用须要的babel插件
 　　　　　  cnpm install vue-template-compiler -D //预编译模板

    合并：cnpm install -D webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env  vue-template-compiler

　　　　四、 编写main.js    

/**
 * 使用ES6语法引入模板
 */
import Vue from 'vue'         
import App from './App.vue'     // 从同级目录下的App.vue文件中引入App.vue模块，并重新取名为App。

new Vue({
    el:'#app',
    render:function(h){ //使用render函数渲染组件
        return h(App);
    }
});

View Code

 

　　　　五、 编写webpack.config.js

module.exports={//进行模块的导出
    //配置入口文件，入库文件为当前目录下的main.js文件
    entry:'./main.js',
    //配置入口文件输出位置
    output:{
        path:__dirname, //指定文件输出位置为项目根路径，默认也是项目的根目录
        filename:'build.js'//未来用的就是这个文件名的文件
    },
    //配置模块加载器
    module:{
        rules:[
            {
                test:/\.vue$/, //全部以.vue结尾的文件都由vue-loader加载
                loader:'vue-loader'
            },
            {
                test:/\.js$/, //全部以.js结尾的文件都由babel-loader加载，除了node_modules之外
                loader:'babel-loader',
                exclude:/node_modules/                //排除node_modules目录的文件
            }
        ]
    }
}

View Code

 

　　　　六、 编写.babelrc  

{//配置插件
    "presets":[
        ["env",{"module":false}]
    ]
}

View Code

 

　　　　七、编写package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev":"webpack-dev-server --open --hot --port 8800"//dev脚本名称（随意），webpack-dev-server启动服务器，--open启动以后打开浏览器，--hot热加载，--port打开的端口
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.3.4"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.5.2",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.0.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.3.4",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
  }
}

View Code

 

　　　　八、 运行测试
    　　　　npm run dev     //实际上就是执行package.json文件内的scripts命令

　　　　九、运行测试以前要编写index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="build.js"></script>  //以前在webpack.config.js中写的名称如今要引入过来
</body>
</html>

View Code