vue 單文件組件

單文件組件

    1、.vue文件
        .vue文件，稱之為單文件組件，是vue.js自定義的一種文件格式，一個.vue文件就是一個單獨的組件，在文件內封裝了組件相關的代碼：HTML、css、JS

        .vue文件是由三部分組成：<template>、<style>、<script>

    2、vue-loader 加載.vue文件

    瀏覽器本身並不認識.vue文件，所以必須對.vue文件進行解析，此時需要vue-loader

    類似的loader還有許多，如：html-loader、css-loader、style-loader、babel-loader

    需要注意的是vue-loader是基於webpack的

    3、webpack
        webpack是一個前端資源模塊化加載器和打包工具，它能夠把各種資源都作為模塊化來使用和處理
        實際上，webpack是通過不同的loader將資源加載后打包，然后輸出后文件
        簡單來說，webpack就是一個模塊加載器，所有資源都可以通過模塊加載，最后打包輸出

        官網：http://webpack.github.io/

        webpack版本：v1.x v2.x

        webpack 有一個核心配置文件：webpack.config.js ，必須放在項目的根文件目錄下

    4、示例：步驟：

    4.1 創建項目目錄結構

    webpack-demo

        |-index.html 【步驟：手動創建】
        |-main-js 入口文件 【步驟：手動創建】
        |-App.vue vue文件 【步驟：手動創建】
        |-package.json工程文件  (注：npm init --yes)
        |-webpack.config.js webpack配置文件 【步驟：手動創建】
        |-.babelrc Babel配置文件 （注：es6轉化文件） 【步驟：手動創建】

    4.2 編寫 App.vue

    4.3安裝相關模塊

        S：生產依賴 ：項目上線使用到的模塊
        D: 開發依賴（--seve-dev的簡寫）：只在項目開發時需要的模塊

        a)、安裝vue模塊
             cnpm install vue -S  （vue模塊下載）

        b)、安裝webpack 開發依賴

         cnpm install webpack --seve-de v（簡寫： cnpm install webpack -D ）

        c)、安裝webpack服務器模塊
 　　　　　　cnpm install webpack-dev-server -D 

        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 fill-loader -D(用於加載字圖、字庫模塊)

        e)、 cnpm install babel-loader -D  （注：es6轉化文件）

             cnpm install babel-core -D 

             cnpm install babel-preset-env -D (注：自動根據配置的運營環境自動啟用需要加載的babel插件)

        f)、安裝預編譯模板
         cnpm install vue-template-compiler -D 

        合並： cnpm install 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 -D 


    　　　　 cnpm install vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler -D 

    4.4 編寫main.js

        import Vue from "vue"

        import App from "./App.vue"


        Vue.config.productionTip = false;

        new Vue({
            render: h => h(App)//使用 render函數渲染組件
        }).$mount('#app');

    4.5 編寫webpack.config.js

 module.exports={
            // 配置入口文件
            entry:'./mian.js',
            //配置出口文件
            output:{
                path:__dirname,//項目的根路徑
                filename:'build.js'
            },
            //    配置模塊加載器
            module:{
                rules:[
                    {
                        test:/\.vue$/,//所有以.vue結尾的文件都由vue-loader加載
                        loader:"vue-loader"
                    },
                    {
                        test:/\.js/,//所有以.js結尾的文件都由babel-loader加載
                        loader:"babel-loader",
                        exclude:/node_modules/,//除了node_modules文件夾以外
                    }
                ]
            }

        };

    4.6 編寫.babelrc 文件

    4.7編寫 package.json
        1、初始的：

　　　　　　"scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
          },

        2、修改后的

　　　　　　　"scripts": {
                "dev": "webpack-dev-server --open --hot --port 8000"
            },

         
    4.8 運行測試

 npm run dev

    注釋：
        <style scoped></style>
        scoped：表示該樣式只在當前組件有效