若重要，總會想辦法（Vue學習筆記two)

時間  2021-01-29
標籤 css html 前端 vue java node python webpack c++ es6 欄目 CSS 简体版
原文   原文鏈接

志向太遠，不可怕；沒有到達，不可怕；可怕的是沒有志向，失去了奮鬥的方向。
你好，我是夢陽辰！期待與你相遇！css


01.插槽slot

爲何要使用插槽？
slot翻譯爲插槽:
在生活中不少地方都有插槽，電腦的USB插槽，插板當中的電源插槽。html

插槽的目的是讓咱們原來的設備具有更多的擴展性。前端

好比電腦的USB咱們能夠插入U盤、硬盤、手機、音響、鍵盤、鼠標等等vue

組件的插槽
組件的插槽也是爲了讓咱們封裝的組件更加具備擴展性。讓使用者能夠決定組件內部的一些內容到底展現什麼。java

例子∶移動網站中的導航欄。
移動開發中，幾乎每一個頁面都有導航欄。
導航欄咱們必然會封裝成一個插件，好比nav-bar組件。一旦有了這個組件，咱們就能夠在多個頁面中複用了。可是，每一個頁面的導航是同樣的嗎?node

不同！
即不一樣的組件要求展現的東西不同，插槽就能夠解決這個問題。python

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/js/vue.js"></script></head><body><cpn></cpn><div id="app">
    <my-cpn><button>我是被插入的東西1</button></my-cpn>
    <my-cpn><button>我是被插入的東西2</button></my-cpn>
    <my-cpn></my-cpn></div><template id="cpn">
    <div>
        <h3>{{title}}</h3>
        <p>我是內容1</p>
        <slot><h3>我是默認值</h3></slot><!--插槽，這裏面也可寫一些默認值-->
    </div></template><script>
    /*es6可使用`來代替"和'
    * */

    //2.註冊組件
    Vue.component('my-cpn',{
        template:`#cpn`,
        data(){
            return{
                title:'有點東西！'
            }
        }
    })
    const app = new Vue({
        el:"#app",
        data:{
            message:"夢陽辰你好！",
        }
    })</script></body></html>

結果：
在這裏插入圖片描述
具名插槽（有名字）webpack

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/js/vue.js"></script></head><body><cpn></cpn><div id="app">
    <my-cpn><span slot="center">搜索框</span></my-cpn></div><template id="cpn">
    <div>
        <slot><h3>左邊</h3></slot><!--插槽，這裏面也可寫一些默認值-->
        <slot name="center"><h3>中間</h3></slot><!--插槽，這裏面也可寫一些默認值-->
        <slot><h3>右邊</h3></slot><!--插槽，這裏面也可寫一些默認值-->

    </div></template><script>
    /*es6可使用`來代替"和'
    * */

    //2.註冊組件
    Vue.component('my-cpn',{
        template:`#cpn`,
        data(){
            return{
                title:'有點東西！'
            }
        }
    })
    const app = new Vue({
        el:"#app",
        data:{
            message:"夢陽辰你好！",
        }
    })</script></body></html>

編譯做用域

vue根據變量在哪一個模板，做用域就在哪一個實例中。
準則∶父組件模板的全部東西都會在父級做用域內編譯;子組件模板的全部東西都會在子級做用域內編譯。c++

做用域插槽
父組件替換插槽的標籤，可是內容由子組件來提供。es6

父組件想要拿到子組件中的數據：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../res/js/vue.js"></script></head><body><div id="app">
    <mycpn></mycpn>

    <mycpn>
        <template v-slot="slot">
            <span>{{slot.data.join(' |')}}</span>

        </template>
    </mycpn></div><template id="cpn">
    <div>
        <slot :data="languages">
            <ul>
                <li v-for="item in languages">{{item}}</li>
            </ul>
        </slot><!--插槽，這裏面也可寫一些默認值-->
    </div></template><script>
    /*es6可使用`來代替"和'
    * */

    const app = new Vue({
        el:"#app",
        data:{
            message:"夢陽辰你好！",
        },
        components:{
            mycpn:{
                template:`#cpn`,
                data(){
                    return{
                        languages:['java','c','c++','python','javaScript']
                    }
                }
            }
        }
    })</script></body></html>

02.模塊化開發（重點）

爲何要模塊發開發？
若是沒有模塊開發，團隊合做時，不一樣的人定義了同一個全局變量名，致使衝突。

而且當js文件過多時，弄清楚他們的順序就是一件比較頭疼的事情。

之前可使用命名閉包的方式解決命名衝突問題。可是不少代碼沒法進行復用。

有什麼方法解決複用問題嗎？

之前：在es5時，能夠在閉包內新建一個對象，保存你要複用的東西，而後用return返回改對象進行復用。

var modrleB =(function ({//定義一個對象var obj={}var name =‘小紅’var flag = falseconsole.log(name);//在對象中添加要複用的東西obj.flag = flagreturn obj;})()

上面是咱們自定義的模塊化。

可是：
幸運的是，前端模塊化開發已經有了不少既有的規範，以及對應的實現方案。
常見的模塊化規範：

CommonJS,AMD,CMD,ES6的Moduels

沒錯，在es6，自帶模塊化。

CommonJS

CommonJS的導出

module.exports m {flag: true,test(a, b){return a + b)，demo(a, b)(return a  b)

CommonJS的導入

// ConmonS模塊let {test， demo， flag }= require( " modulcA ');//等同於let _mA- require( ' modu1cA");let test =_mA.test;let demo = _mA.demo;let f1ag =_mA.flag;

node.js底層實現了這些功能

ES6模塊化的導入與導出

引入時聲明模塊化，模塊之間就不能相互使用。

<script src="a.js" type="module"></script>

除非它本身導出一些內容，其餘模塊才能使用。

a.js

var name="小明"var flag = true;function sum(num1,num2) {
    return num1-num2;}if(flag){
    console.log(sum(3,6));}export{
    flag,sum}

b.js

var name="夢陽辰"var flag = true;function sum(num1,num2) {
    return num1+num2;}if(flag){
    console.log(sum(3,6));}export{
   flag,sum}//導出方式二export var num =1;export function num3(num1,num2) {
    return num1*num2;}

c.js

import {flag,sum,num} from "./b.js";if(flag){
    alert(sum(20,30));}alert(num)

首頁：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a.js" type="module"></script>
    <script src="b.js" type="module"></script>
    <script src="c.js" type="module"></script></head><body></body></html>

export指令用於導出變量函數…。

//導出類export class Person{}

export default指令導出，導入時名字能夠隨意，但不容許存在多個。

var address ="上海市"export default address;導入：import aa from "./a.js";

統一所有導入：

import * as ff from "./a.js";

03.Webpack

從本質上來說，webpack是一個現代的JavaScript應用的靜態模塊打包工具。
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

也就是：模塊和打包。
在這裏插入圖片描述
webpack能夠前端模塊化方案的代碼：轉換成瀏覽器能夠識別的代碼。

前端模塊化：

在ES6以前，咱們要想進行模塊化開發，就必須藉助於其餘的工具，讓咱們能夠進行模塊化開發。

而且在經過模塊化開發完成了項目後，還須要處理模塊間的各類依賴，而且將其進行整合打包。

然而webpack其中一個核心就是讓咱們可能進行模塊化開發，而且會幫助咱們處理模塊間的依賴關係。

並且不只僅是JavaScript文件，咱們的CSS、圖片、json文件等等在webpack中均可以被當作模塊來使用(在後續咱們會看到)。

這就是webpack中模塊化的概念。
打包：
打包如何理解呢?
理解了webpack能夠幫助咱們進行模塊化，而且處理模塊間的各類複雜關係後,打包的概念就很是好理解了。

就是將webpack中的各類資源模塊進行打包合併成一個或多個包(Bundle)。

而且在打包的過程當中，還能夠對資源進行處理，好比壓縮圖片，將scss轉成css，將ES6語法轉成ES5語法，將TypeScript轉成JavaScript等等操做。

還有一種打包方式gulp/grunt他沒有模塊化，適合沒有用到模塊化的工程。

webpack安裝

在安裝 Webpack 前，你本地環境須要支持 node.js
在這裏插入圖片描述
node.js自帶了軟件包管理工具npm。
因爲 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm

npm install -g cnpm --registry = https：//registry.npm.taobao.org

使用 cnpm 安裝 webpack：

cnpm install webpack@3.6.0 -g

npm 和 cnpm 的區別

（1） 二者之間只是 node 中包管理器的不一樣

（2） npm是node官方的包管理器。cnpm是個中國版的npm，是淘寶定製的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm:

（3）若是由於網絡緣由沒法使用npm下載，那cnpm這個就派上用場了。

全局安裝與非全局安裝：

-g：全局安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm，而且寫入系統環境變量； 非全局安裝：將會安裝在當前定位目錄； 全局安裝能夠經過命令行在任何地方調用它，本地安裝將安裝在定位目錄的node_modules文件夾下，經過require()調用；

你可使用任何模塊化開發：而後交給webpack打包：
例如使用commonJS模塊導入導出:

mathUtil.js

function add(num1,num2) {
    return num1+num2;}function multiplied(num1,num2){
    return num1*num2;}module.exports={
    add,multiplied}

index.js

const {add,multiplied} =require('./mathUtils')alert(add(20,50))

web打包：
先cd到項目目錄：
在使用命令：

webpack  要打包的入口文件路徑     指定目錄和文件名稱

在這裏插入圖片描述
webpack會自動處理依賴文件。

方式二：使用配置文件打包

經過cnpm init命令建好package.json文件。
新建webpack.config.js文件：

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//動態獲取路徑，node語法
        filename:'bundle.js'
    },}

cd到項目目錄：在輸入命令webpack便可打包。

打包成功後，生成bundle.js文件：

/******/ (function(modules) { // webpackBootstrap/******/ 	// The module cache/******/ 	var installedModules = {};/******//******/ 	// The require function/******/ 	function __webpack_require__(moduleId) {/******//******/ 		// Check if module is in cache/******/ 		if(installedModules[moduleId]) {/******/ 			return installedModules[moduleId].exports;/******/ 		}/******/ 		// Create a new module (and put it into the cache)/******/ 		var module = installedModules[moduleId] = {/******/ 			i: moduleId,/******/ 			l: false,/******/ 			exports: {}/******/ 		};/******//******/ 		// Execute the module function/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******//******/ 		// Flag the module as loaded/******/ 		module.l = true;/******//******/ 		// Return the exports of the module/******/ 		return module.exports;/******/ 	}/******//******//******/ 	// expose the modules object (__webpack_modules__)/******/ 	__webpack_require__.m = modules;/******//******/ 	// expose the module cache/******/ 	__webpack_require__.c = installedModules;/******//******/ 	// define getter function for harmony exports/******/ 	__webpack_require__.d = function(exports, name, getter) {/******/ 		if(!__webpack_require__.o(exports, name)) {/******/ 			Object.defineProperty(exports, name, {/******/ 				configurable: false,/******/ 				enumerable: true,/******/ 				get: getter/******/ 			});/******/ 		}/******/ 	};/******//******/ 	// getDefaultExport function for compatibility with non-harmony modules/******/ 	__webpack_require__.n = function(module) {/******/ 		var getter = module && module.__esModule ?/******/ 			function getDefault() { return module['default']; } :/******/ 			function getModuleExports() { return module; };/******/ 		__webpack_require__.d(getter, 'a', getter);/******/ 		return getter;/******/ 	};/******//******/ 	// Object.prototype.hasOwnProperty.call/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };/******//******/ 	// __webpack_public_path__/******/ 	__webpack_require__.p = "";/******//******/ 	// Load entry module and return exports/******/ 	return __webpack_require__(__webpack_require__.s = 0);/******/ })/************************************************************************//******/ ([/* 0 *//***/ (function(module, exports, __webpack_require__) {const {add,multiplied} =__webpack_require__(1)alert(add(20,50))/***/ }),/* 1 *//***/ (function(module, exports) {function add(num1,num2) {
    return num1+num2;}function multiplied(num1,num2){
    return num1*num2;}module.exports={
    add,multiplied}/***/ })/******/ ]);

首頁引用打包後的js文件：

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/bundle.js"></script></head><body></body></html>

方式三：
命令映射：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"}
命令：cnpm run build

項目開發時咱們通常使用項目本地的webpack，而以前咱們安裝的時全局的webpack.
當咱們在使用webpack命令時是先找本地的webpack，再去找全局的webpack。
本地如何安裝webpack?
只須要在項目目錄下輸入命令：

cnpm install webpack@3.6.0  --save-dev

開發時依賴，運行時依賴
webpack就是開發時依賴：因此--save-dev
完成後：

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }}

而且生成目錄：
在這裏插入圖片描述
package.json中的scripts的腳本在執行時

會按照必定的順序尋找命令對應的位置。

首先，會尋找本地的node_modules/lbin路徑中對應的命令。

若是沒有找到，會去全局的環境變量中尋找。

loader

loader是webpack中一個很是核心的概念。

webpack用來作什麼呢?
在咱們以前的實例中，咱們主要是用webpack來處理咱們寫的js代碼，而且webpack會自動處理js之間相關的依賴。

可是，在開發中咱們不只僅有基本的js代碼處理，咱們也須要加載css、圖片，也包括一些高級的將ES6轉成ES5代碼，將TypeScript轉成ES5代碼，將scss、less轉成css，將.jsx、.vue文件轉成js文件等等。

對於webpack自己的能力來講，對於這些轉化是不支持的。
那怎麼辦呢?給webpack擴展對應的loader就能夠啦。
在這裏插入圖片描述

loader使用過程:
步驟一︰經過npm安裝須要使用的loader

步驟二∶在webpack.config.js中的modules關鍵字下進行配置

大部分loader咱們均可以在webpack的官網中找到，而且學習對應的用法。

安裝loader
webpack文檔
你可使用 loader 告訴 webpack 加載 CSS 文件首先安裝相對應的 loader：

npm install --save-dev css-loader

咱們這裏使用這個版本

npm install css-loader@2.0.2 --save-dev

淘寶鏡像記得用cnpm
在webpack.config.js的module關鍵字下進行配置
指示 webpack 對每一個 .css 使用 css-loader：

由於咱們使用的webpack爲3.6.0因此須要注意版本

還須要一個loader將模塊導出做爲樣式添加到DOM中 ：

style-loader

npm install style-loader@0.23.1 --save-dev
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' }
    ]
  }};//從上到下，從右到左讀取

配置後：
webpack.config.js

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//動態獲取路徑，node語法
        filename:'bundle.js'
    },module:{
        rules: [
            {//加載資源
                test:/\.css$/,
                use:[//讀取css文件
                    'style-loader',//將js文件讀取到html中
                    'css-loader',
                ]
            }
            ]
    }}

注意以下寫法：配置兩個對象，是沒有用的，會報錯，由於webpack版本的問題。不能用這種方式，這種方式不適合webpack3的版本，webpack5是能夠的！

 rules: [
      { test: /\.css$/, use: 'css-loader' }
       { test: /\.css$/, use: 'style-loader' }
    ]

你被這個搞到凌晨0點半，記住。

若是咱們但願在項目中使用less、scss.stylus來寫樣式，webpack是否能夠幫助咱們處理呢?

咱們這裏以less爲例，其餘也是同樣的。
咱們仍是先建立一個less文件，依然放在css文件夾中.

安裝less-loader

npm install --save-dev less-loader@4.1.0 less@3.9.0

webpack-config.js文件配置：

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//動態獲取路徑，node語法
        filename:'bundle.js'
    },module:{
        rules: [
            {//加載資源
                test:/\.css$/,
                use:[//讀取css文件
                    'style-loader',//將js文件讀取到html中
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }
            ]
    }}

處理圖片資源

下載文件對應url-loader

npm install --save-dev url-loader@1.1.2

打包後會將圖片轉換成base64的字符串。
在這裏插入圖片描述
配置：

{
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            /*當加載的圖片，小於limit時，圖片會編碼爲base64*/
                            limit: 18000
                        }
                    }
                ]
            }

當圖片小於limit時，會編碼爲base64,若是大於limit會被file-loader編碼打包。因此你須要下載file-loader

npm install --save-dev file-loader@3.0.1

安裝好後便可。
可是第二種圖片file-loader打包方式不是生成base64，而是在dist目錄下生成圖片，文件名字時自動生成（防止重複）。所以須要格外注意路徑問題。

可是咱們仍是得有所規範：
咱們能夠在options中添加上以下選項:
img :文件要打包到的文件夾

name :獲取圖片原來的名字，放在該位置

hash:8:爲了防止圖片名稱衝突，依然使用

hash，可是咱們只保留8位

ext:使用圖片原來的擴展名

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//動態獲取路徑，node語法
        filename:'bundle.js',
        publicPath:'dist/'/*關於路徑會自動往路徑前加dist/*/
    },module:{
        rules: [
            {//加載資源
                test:/\.css$/,
                use:[//讀取css文件
                    'style-loader',//將js文件讀取到html中
                    'css-loader',
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            /*當加載的圖片，小於limit時，圖片會編碼爲base64*/
                            limit: 18000,
                            name:'img/[name].[hash:8].[ext]'

                        },
                    }
                ]
            }
            ]
    }}

對es6語法處理成es5

若是但願將ES6的語法轉成ES5，那麼就須要使用babel

而在webpack中，咱們直接使用babel對應的loader就能夠了。

安裝對應版本的babel

npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1

配置webpack.config.js文件

配置vue

後續項目中,咱們會使用Vuejs進行開發，並且會以特殊的文件來組織vue的組件。因此，下面咱們來學習一下如何在咱們的webpack環境中集成Vuejs

如今，咱們但願在項目中使用Vuejs，那麼必然須要對其有依賴，因此須要先進行安裝

注∶由於咱們後續是在實際項目中也會使用vue的，因此並非開發時依賴

npm install vue@2.5.21 --save

由於運行時也須要使用vue,因此並非開發時依賴。因此不須要dev.

那麼，接下來就能夠按照咱們以前學習的方式來使用Vue了:

1.runtime-only 代碼中不能夠有任何的template

2.runtime-compiler代碼中能夠有template

配置runtime-compiler：

const path = require('path')module.exports={
    entry:'./src/index.js',//入口
    output: {
        path:path.resolve(__dirname,'dist'),//動態獲取路徑，node語法
        filename:'bundle.js',
        publicPath:'dist/'/*關於路徑會自動往路徑前加dist/*/
    },module:{
    },
    resolve:{
        alias:{//別名
            'vue$':'vue/dist/vue.esm.js'
        }
    }}

咱們來考慮另一個問題:
若是咱們但願將data中的數據顯示在界面中，就必須是修改index.html口若是咱們後面自定義了組件，也必須修改index.html來使用組件
可是html模板在以後的開發中，我並不但願手動的來頻繁修改，是否能夠作到呢?

定義template屬性:
在前面的Vue實例中，咱們定義了el屬性，用於和index.html中的#app進行綁定，讓Vue實例以後能夠管理它其中的內容這裏.

咱們能夠將div元素中的({message}}內容刪掉，只保留一個基本的id爲div的元素。

可是若是我依然但願在其中顯示{{message}}的內容，應該怎麼處理呢?

咱們能夠再定義一個template屬性，代碼以下∶

el: '#app',template:`<div>
<h2>{{message}}</h2>
<button @click="btnclick">按鈕</button><h2>{{name}}</h2>
</div>`

它會用template替換<div id="app"></div>。

再思考：
若是template過多，代碼混亂,有什麼方法把template抽取出來呢？

const App={
	template:`<div>
<h2>{{message}}</h2>
<button @click="btnclick">按鈕</button><h2>{{name}}</h2>
</div>`,data(){
	return{
		message:'你好！',
		name:'夢陽辰'
	}
 },methods:{
 btnclick(){
  }
 }}new Vue({
	el:'#app',
	template:'<App/>',
	components:{
	App:App	}})

仍是不夠？
對再抽離:
先下載安裝vue-loarder和vue-template-compiler

npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev

修改配置文件：

 {
                test:/\.vue$/,
                user:['vue-loader']
 }

由於咱們的vue-loader版本大於14,因此還須要安裝一個webpack插件才能正常使用！

// webpack.config.jsconst VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]}

在package.json裏面找到"vue-loader": "^15.4.2",並更改成"vue-loader": "^15.0.0",而後輸入命令npm install

將組件的東西，放在vue/app.vue目錄下：

<template>
    <div>
        <h2 class="title">{{message}}</h2>
        <button @click="btnclick">按鈕</button><h2>{{name}}</h2>
    </div></template><script>
    export default {
        name:"App",
        data(){
            return{
                message:'你好！',
                name:'夢陽辰'
            }
        },methods:{
            btnclick(){
            }
        }
    }</script><style scoped>
    .title{
        color:green;
    }</style>

index.js文件：

const {add,multiplied} =require('./js/mathUtils')alert(add(20,50))//依賴css文件require('./css/normal.css')//4.依賴less文件require('./css/special.less')document.writeln('<h2>你好！</h2>')//5.使用vue進行開發import Vue from 'vue'// import App from './vue/app.js'import App from './vue/App.vue'new Vue({
    el:'#app',
    template:'<App/>',
    components:{
        App:App    }})

Plugin(插件)

plugin是什麼?
plugin是插件的意思，一般是用於對某個現有的架構進行擴展。
webpack中的插件，就是對webpack現有功能的各類擴展，好比打包優化，文件壓縮等等。

loader和plugin區別
loader主要用於轉換某些類型的模塊，它是一個轉換器。plugin是插件，它是對webpack自己的擴展，是一個擴展器。

plugin的使用過程∶
步驟一︰經過npm安裝須要使用的plugins(某些webpack已經內置的插件不須要安裝)

步驟二:在webpack.config.js中的plugins中配置插件。

下面，咱們就來看看能夠經過哪些插件對現有的webpack打包過程進行擴容，讓咱們的webpack變得更加好用。

BannerPlugin
咱們先來使用一個最簡單的插件，爲打包的文件添加版權聲明口該插件名字叫BannerPlugin，屬於webpack自帶的插件。按照下面的方式來修改webpack.config.js的文件:

const path = require( ' path ')const webpack = require( "webpack')module.exports = {plugins:[new webpack.BannerPlugin('最終版權歸mengyangchen全部')]}

htmlWebpackPlugin插件

目前，咱們的index.html文件是存放在項目的根目錄下的。
咱們知道，在真實發布項目時，發佈的是dist文件夾中的內容，可是dist文件夾中若是沒有index.html文件，那麼打包的js等文件也就沒有意義了。

因此，咱們須要將index.html文件打包到dist文件夾中，這個時候就可使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件能夠爲咱們作這些事情:

自動生成一個index.html文件(能夠指定模板來生成)

將打包的js文件，自動經過script標籤插入到body中

安裝HtmlWebpackPlugin插件

npm install html-webpack-plugin@3.2.0 --save--dev

使用插件，修改webpack.config.js文件中plugins部分的內容以下∶

plugins: [new webpack.BannerPlugin('最終版權mengyangchne全部"),new htmlwebpackPlugin({template: 'index.html'),

這裏的template表示根據什麼模板來生成index.html

另外，咱們須要刪除以前在output中添加的publicPath屬性

不然插入的script標籤中的src可能會有問題

js壓縮的Plugin(uglifyjs-webpack-plugin)

安裝：

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件

const path = require( ' path ")const webpack = require( "webpack ')const uglifyJsPlugin = require('uglifyjs-webpack-plugin ')module.exports = f
plugins:[new webpack.BannerPlugin('最終版權歸coderwhy全部")new uglifyJsPlugin()

搭建本地服務器

webpack提供了一個可選的本地開發服務器，這個本地服務器基於node.js搭建，內部使用express框架，能夠實現咱們想要的讓瀏覽器自動刷新顯示咱們修改後的結果。

不過它是一個單獨的模塊，在webpack中使用以前須要先安裝它

npm install --save-dev webpack-dev-server@2.9.3

devserver也是做爲webpack中的一個選項，選項自己能夠設置以下屬性∶

contentBase :爲哪個文件夾提供本地服務，默認是根文件夾，咱們這裏要填寫./dist

port :端口號

inline :頁面實時刷新

historyApiFallback :在SPA頁面中，依賴HTML5的history模式

webpack.config.js文件配置修改以下：

devServer: {contentBase:'./dist',inline: true//是否實時監聽}

再配置scripts:

"dev": "webpack-dev-server --open"

webpack配置文件的分離

04.vuecli腳手架

若是你只是簡單寫幾個Vue的Demo程序,那麼你不須要Vue CLI.

若是你在開發大型項目，那麼你須要,而且必然須要使用Vue CLI

使用Vue.js開發大型應用時，咱們須要考慮代碼目錄結構、項目結構和部著、熱加載、代碼串兀測風寺事情。

若是每一個項目都要手動完成這些工做，那無疑效率比較低效，因此一般咱們會使用一些腳手架工具來幫助完成這些事情。

CLI是什麼意思?
CLI是Command-Line Interface,翻譯爲命令行界面,可是俗稱腳手架.Vue CLI是一個官方發佈vue.js項目腳手架

使用vue-cli能夠快速搭建Vue開發環境以及對應的webpack配置.

腳手架長什麼樣子?

安裝Vue CLI

官網

vue.js官方腳手架就使用了webpack模板。
使用前提：node.js

vue-cli官方提供的一個腳手架,用於快速生成一個vue的項目模板;

預先定義好的目錄結構及基礎代碼，就比如我們在建立Maven項目時能夠選擇建立一個骨架項目，這個骨架項目就是腳手架,咱們的開發更加的快速;

安裝node
因此須要安裝webpack

安裝Vue腳手架：
這是最新的vue/cli（4版本）

cnpm install -g @vue/cli

遇到安裝問題，用管理員身份執行：

npm clean cache --froce即刪除文件
c：\user\用戶名\AppData\Roaming\npm-cache

運行如下命令來建立一個新項目（vue-cli3/4)：

vue create 項目名

對於vue/cli2版本建立項目的目錄：

vue init webpack 項目名

在這裏插入圖片描述
在這裏插入圖片描述
runtimeonly和runtimeComplier的區別：
main.js不一樣
在這裏插入圖片描述
Vue程序執行過程
在這裏插入圖片描述
總結
若是在以後的開發中，你依然使用template，就須要選擇Runtime-Compiler

若是你以後的開發中，使用的是.vue文件夾開發，那麼能夠選擇Runtime-only
在這裏插入圖片描述
在這裏插入圖片描述

Vue CLI3/4建立項目

vue-cli 3與2版本有很大區別
vue-cli 3是基於webpack 4打造，vue-cli 2仍是webapck 3

vue-cli 3的設計原則是「0配置」，移除的配置文件根目錄下的，build和config等目錄vue-cli 3提供了vue ui命令，提供了可視化配置，更加人性化

移除了static文件夾，新增了public文件夾，而且index.html移動到public中

建立項目：

vue create 項目名

選擇preset(設置）
Manually手動

按空格選擇和取消。

Vue CLI3/4配置去哪裏了？

vue ui
啓動本地服務

能夠管理項目。
在這裏插入圖片描述

箭頭函數

箭頭函數是定義函數的方式。

const aa=function(){}//箭頭函數const bb =(參數列表）=>{}const sum = (num1,num2)=>{return num1+num2;}const sum = num=>{return num*num}//函數體內只有一行代碼const num = (num1,num2)=>num1+num2

Time past cannot be called back again.

在這裏插入圖片描述

在這裏插入圖片描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程