單文件組件

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