1.匯出匯入
    模組成員匯出：module.exports 和 exports
    模組成員匯入：require('模組識別符號')

	1.如果匯入的物件中，沒有向外暴露物件，就會得到一個空的物件
	2.預設匯出和按需匯出不會衝突
	3.每個模組預設匯出只能用一次，但是按需匯出可以用很多次
	4.按需匯入還可以用as來給匯入的起別名(py)import a as aa from*
	5.直接匯入模組標誌符可以執行模組
	
	一.Node.js 中通過 babel 體驗 ES6 模組化
		npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
		npm install --save @babel/polyfill
		專案跟目錄建立檔案 babel.config.js
		babel.config.js 檔案內容如右側程式碼
		通過 npx babel-node index.js 執行程式碼
		
	二、預設匯出 與 預設匯入
		匯出：
			預設匯出語法 export default 預設匯出的成員
			
			abcd function show(){}
			export default{a,c,show}
		匯入：
			預設匯入語法 import 接收名稱 from '模組識別符號'

			import m1 from './m1.js'
			console.log(m1)
			// 列印輸出的結果為：
			// { a: 10, c: 20, show: [Function: show] }
	三、按需匯出和匯入
	匯出：
		按需匯出語法 export let s1 = 10
		export let s1 = 'aaa'
		export let s2 = 'ccc'
	匯入：
		按需匯入語法 import { s1 } from '模組識別符號'
		import { s1, s2 as ss2 } from './m1.js'
	四、直接匯入並執行模組程式碼
		import './m2.js'

2.webpack
    一、初步使用

        1.新建專案空白目錄，並執行 npm init –y 命令，初始化包管理配置檔案 package.json
        2.新建 src 原始碼目錄
        3.新建 src -> index.html 首頁
        4.初始化首頁基本的結構
        5.執行 npm install jquery –S 命令，安裝 jQuery
        6.通過模組化的形式，實現列表隔行變色效果

    二、在專案中安裝和配置 webpack
        1.執行 npm install webpack webpack-cli –D 命令，安裝 webpack 相關的包
        2.在專案根目錄中，建立名為 webpack.config.js 的 webpack 配置檔案
        3.在 webpack 的配置檔案中，初始化如下基本配置：
            module.exports = {
                mode: 'development' // mode 用來指定構建模式
            ｝
        4.在 package.json 配置檔案中的 scripts 節點下，新增 dev 指令碼如下：
            "scripts": {
            "dev": "webpack" // script 節點下的指令碼，可以通過 npm run 執行
            ｝
        5.在終端中執行 npm run dev 命令，啟動 webpack 進行專案打包。
    三、配置打包的入口與出口
        如果要修改打包的入口與出口，可以在 webpack.config.js 中新增如下配置資訊：
        const path = require('path') // 匯入 node.js 中專門操作路徑的模組
        module.exports = {
            entry: path.join(__dirname, './src/index.js'), // 打包入口檔案的路徑
            output: {
                path: path.join(__dirname, './dist'), // 輸出檔案的存放路徑
                filename: 'bundle.js' // 輸出檔案的名稱
                ｝
            ｝
    四、配置 webpack 的自動打包功能
        1.執行 npm install webpack-dev-server –D 命令，安裝支援專案自動打包的工具
        2.修改 package.json -> scripts 中的 dev 命令如下：
            "scripts": {
                "dev": "webpack-dev-server" // script 節點下的指令碼，可以通過 npm run 執行
                ｝
        3.將 src -> index.html 中，script 指令碼的引用路徑，修改為 "/buldle.js“
        4.執行 npm run dev 命令，重新進行打包
        5.在瀏覽器中訪問 http://localhost:8080 地址，檢視自動打包效果
        PS：
            webpack-dev-server 會啟動一個實時打包的 http 伺服器
            webpack-dev-server 打包生成的輸出檔案，預設放到了專案根目錄中，而且是虛擬的、看不見的
    五、配置 html-webpack-plugin 生成預覽頁面
        執行 npm install html-webpack-plugin –D 命令，安裝生成預覽頁面的外掛
        修改 webpack.config.js 檔案頭部區域，新增如下配置資訊：
            // 匯入生成預覽頁面的外掛，得到一個建構函式
            const HtmlWebpackPlugin = require('html-webpack-plugin')
            const htmlPlugin = new HtmlWebpackPlugin({ // 建立外掛的例項物件
            template: './src/index.html', // 指定要用到的模板檔案
            filename: 'index.html' // 指定生成的檔案的名稱，該檔案存在於記憶體中，在目錄中不顯示
            })
        修改 webpack.config.js 檔案中向外暴露的配置物件，新增如下配置節點：
            module.exports = {
                plugins: [ htmlPlugin ] // plugins 陣列是 webpack 打包期間會用到的一些外掛列表
            }
    六、配置自動打包相關的引數
        // package.json中的配置
        // --open 打包完成後自動開啟瀏覽器頁面
        // --host 配置 IP 地址
        // --port 配置埠
        "scripts": {
            "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
        },
    七、webpack 中的載入器
        1)通過 loader 打包非 js 模組
        在實際開發過程中，webpack 預設只能打包處理以 .js 字尾名結尾的模組，其他非 .js 字尾名結
        尾的模組，webpack 預設處理不了，需要呼叫 loader 載入器才可以正常打包，否則會報錯！
            loader 載入器可以協助 webpack 打包處理特定的檔案模組，比如：
            less-loader 可以打包處理 .less 相關的檔案
            sass-loader 可以打包處理 .scss 相關的檔案
            url-loader 可以打包處理 css 中與 url 路徑相關的檔案
            
        2)webpack 中載入器的基本使用
            1. 打包處理 css 檔案
            執行 npm i style-loader css-loader -D 命令，安裝處理 css 檔案的 loader
            在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
                // 所有第三方檔案模組的匹配規則
                module: {
                    rules: [
                        { test: /\.css$/, use: ['style-loader', 'css-loader'] }
                        ]
                    }
            其中，test 表示匹配的檔案型別， use 表示對應要呼叫的 loader
            PS:
                use 陣列中指定的 loader 順序是固定的
                多個 loader 的呼叫順序是：從後往前呼叫
                
            2.打包處理 less 檔案
            執行 npm i less-loader less -D 命令
            在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
                // 所有第三方檔案模組的匹配規則
                module: {
                    rules: [
                        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
                        ]
                    }
                
            3.打包處理 scss 檔案
            執行 npm i sass-loader node-sass -D 命令
            在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
                // 所有第三方檔案模組的匹配規則
                module: {
                    rules: [
                        { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
                        ]
                    }
                
            4.配置 postCSS 自動新增 css 的相容字首  用於高階語法的向下相容
            執行 npm i postcss-loader autoprefixer -D 命令
            在專案根目錄中建立 postcss 的配置檔案 postcss.config.js，並初始化如下配置：
                const autoprefixer = require('autoprefixer') // 匯入自動新增字首的外掛
                module.exports = {
                    plugins: [ autoprefixer ] // 掛載外掛
                }
            在 webpack.config.js 的 module -> rules 陣列中，修改 css 的 loader 規則如下：
                module: {
                    rules: [
                        { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
                        ]
                    }
                
            5.打包樣式表中的圖片和字型檔案
            執行 npm i url-loader file-loader -D 命令
            在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
                module: {
                    rules: [
                        {
                            test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                            use: 'url-loader?limit=16940'
                        }
                    ]
                ｝
            PS：
                其中 ? 之後的是 loader 的引數項。
                limit 用來指定圖片的大小，單位是位元組(byte),只有小於 limit 大小的圖片，才會被轉為 base64 圖片



            6.打包處理 js 檔案中的高階語法
            安裝babel轉換器相關的包：npm i babel-loader @babel/core @babel/runtime -D
            安裝babel語法外掛相關的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D
            在專案根目錄中，建立 babel 配置檔案 babel.config.js 並初始化基本配置如下：
                module.exports = {
                    presets: [ '@babel/preset-env' ],
                    plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties’ ]
                }
            在 webpack.config.js 的 module -> rules 陣列中，新增 loader 規則如下：
                // exclude 為排除項，表示 babel-loader 不需要處理 node_modules 中的 js 檔案
                { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

        
        過程中的一些經驗：
            1.li:odd li的奇數行,li:even li的偶數行
            2.自動打包，在package.json中修改dev為webpack-dev-server，然後修改src,bundle.js在沒結束自動打包前都是儲存在虛擬記憶體中
            3.postcss和babel是需要config.js檔案的
                postcss.config.js
                    const autoprefixer = require('autoprefixer')

                    module.exports = {
                      plugins: [autoprefixer]
                    }

                babel.config.js
                    module.exports = {
                      presets: ['@babel/preset-env'],
                      plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
                    }

            4.編譯完css等檔案後，記得匯入index.js
            5.scss的loader檔名字叫 sass-loader
            6.在處理JS高階語法的時候，記得排除node_modules這個資料夾
	
3.Vue單檔案
	1.單檔案元件的組成結構
		template 元件的模板區域
		script 業務邏輯區域
		style 樣式區域
        
        <template>
        </template>
        <script>
        </script>
        <style>
        </style>
    2.webpack 中配置 vue 元件的載入器
        執行 npm i vue-loader vue-template-compiler -D 命令
        在 webpack.config.js 配置檔案中，新增 vue-loader 的配置項如下：
            const VueLoaderPlugin = require('vue-loader/lib/plugin')
            module.exports = {
                module: {
                    rules: [
                        //其他規則
                        { test: /\.vue$/, loader: 'vue-loader' }
                    ]
                },
                plugins: [
                    // ... 其它外掛
                    new VueLoaderPlugin() // 請確保引入這個外掛！
                ]
            ｝
    3.在 webpack 專案中使用 vue
        執行 npm i vue –S 安裝 vue
        在 src -> index.js 入口檔案中，通過 import Vue from 'vue' 來匯入 vue 建構函式
        建立 vue 的例項物件，並指定要控制的 el 區域
        通過 render 函式渲染 App 根元件(在使用的時候最好通過render來渲染元件，因為Import的Vue是閹割版的不是很全)
            // 1. 匯入 Vue 建構函式
            import Vue from 'vue'
            // 2. 匯入 App 根元件
            import App from './components/App.vue'
            const vm = new Vue({
                // 3. 指定 vm 例項要控制的頁面區域
                el: '#app',
                // 4. 通過 render 函式，把指定的元件渲染到 el 區域中
                render: h => h(App)
            })
            
        需要在webpack.config.js中匯入const VueLoaderPlugin = require('vue-loader/lib/plugin'),並且放在plugins中，在INDEX中用Import來匯入Vue	
    4.webpack 打包釋出
        上線之前需要通過webpack將應用進行整體打包，可以通過 package.json 檔案配置打包命令：
        // 在package.json檔案中配置 webpack 打包命令
        // 該命令預設載入專案根目錄中的 webpack.config.js 配置檔案
        "scripts": {
            // 用於打包的命令
            "build": "webpack -p",
            // 用於開發除錯的命令
            "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
        },

   
   
   
4.Vue腳手架  
	Vue 腳手架用於快速生成 Vue 專案基礎架構，其官網地址為：https://cli.vuejs.org/zh/
    1. 安裝 Vue 腳手架：
    npm install -g @vue/cli
    2.基於腳手架建立vue專案
        // 1. 基於 互動式命令列 的方式，建立 新版 vue 專案
        vue create my-project
        
        1.在packjson中配置
        "vue": {
            "devServer": {
            "port": "8888",
            "open" : true
            }
        }
        
        2. 通過單獨的配置檔案配置專案
        在專案的跟目錄建立檔案 vue.config.js
        在該檔案中進行相關配置，從而覆蓋預設配置
        // vue.config.js
        module.exports = {
            devServer: {
            port: 8888
            }
        }
        Vue腳手架自定義配置，可以在package.json裡配置（不推薦），因為package.json是用來管理包的配置資訊
        所以推薦將Vue腳手架的相關配置，單獨定義到vue.config.js配置檔案中
        
        // 2. 基於 圖形化介面 的方式，建立 新版 vue 專案
        vue ui
        // 3. 基於 2.x 的舊模板，建立 舊版 vue 專案
        npm install -g @vue/cli-init

    3.element
        安裝依賴包 npm i element-ui –S
        匯入 Element-UI 相關資源
            // 匯入元件庫
            import ElementUI from 'element-ui';
            // 匯入元件相關樣式
            import 'element-ui/lib/theme-chalk/index.css';
            // 配置 Vue 外掛
            Vue.use(ElementUI);
            
        Element UI可以手動配置，也可以在Vue圖形介面配置
	
	
	單冒號( : )用於CSS3偽類，雙冒號( :: )用於CSS3偽元素
	⽤於區分偽類和偽元素