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

原創 osc_n3mzii7x 2021-01-30 09:24

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


01.插槽slot

爲什麼要使用插槽？
slot翻譯爲插槽:
在生活中很多地方都有插槽，電腦的USB插槽，插板當中的電源插槽。

插槽的目的是讓我們原來的設備具備更多的擴展性。

比如電腦的USB我們可以插入U盤、硬盤、手機、音響、鍵盤、鼠標等等

組件的插槽
組件的插槽也是爲了讓我們封裝的組件更加具有擴展性。讓使用者可以決定組件內部的一些內容到底展示什麼。

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

不一樣！
即不同的組件要求展示的東西不一樣，插槽就可以解決這個問題。

<!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>

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

<!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根據變量在哪個模板，作用域就在哪個實例中。
準則∶父組件模板的所有東西都會在父級作用域內編譯;子組件模板的所有東西都會在子級作用域內編譯。

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

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

<!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 [email protected] -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 [email protected]  --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 [email protected] --save-dev

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

因爲我們使用的webpack爲3.6.0所以需要注意版本

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

style-loader

npm install [email protected] --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 [email protected] [email protected]

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 [email protected]

打包後會將圖片轉換成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 [email protected]

安裝好後即可。
但是第二種圖片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 [email protected] [email protected] [email protected]

配置webpack.config.js文件

配置vue

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

現在，我們希望在項目中使用Vuejs，那麼必然需要對其有依賴，所以需要先進行安裝

注∶因爲我們後續是在實際項目中也會使用vue的，所以並不是開發時依賴

npm install [email protected] --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 [email protected] [email protected] --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 [email protected] --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 [email protected] --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 [email protected]

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.

在這裏插入圖片描述

在這裏插入圖片描述


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

前端面試題 - NodeJS能用ES6模塊嗎？CommonJS 和 ES6模塊的區別是什麼？

前端面試題 - NodeJS能用ES6模塊嗎？CommonJS 和 ES6模塊的區別是什麼？ JS能寫前端web，也能寫NodeJS。 Node.js 後端應用由模塊組成，其模塊系統採用 CommonJS 規範，它並不是 JavaScri

原創 2024-04-24 23:51:06

實戰剖析-vue項目首屏加載時長優化

現狀分析： 首屏速度是用戶體驗的最關鍵一環，而首屏速度最大的決定性因素就是資源的加載速度，資源加載速度等於資源大小 + 網速，老的前端項目隨着不斷增長，代碼可能會變得混亂，冗餘難以理解，不斷的做加法，久而久之，前端性能上就會受到影響，

原創 2024-04-22 11:16:32

JavaScript開發工具WebStorm v2024.1全新發布——增強全行代碼補全功能

WebStorm 是jetbrains公司旗下一款JavaScript 開發工具，被廣大中國JS開發者譽爲"Web前端開發神器""強大的HTML5編輯器""智能的JavaSscript IDE"等。與IntelliJ IDEA同源，繼承了I

原創 2024-04-29 11:35:39

使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（一）

DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

原創 2024-04-26 11:35:57

「實戰應用」如何用圖表控件LightningChart創建2D氣泡圖

LightningChartJS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空航

原創 2024-04-25 11:36:06

前端面試題 - 說一下原型和原型鏈？

前端面試題 - 說一下原型和原型鏈？ JavaScript 中，萬物皆對象，對象分爲普通對象和函數對象。 所有的函數都是函數對象（typeof f === 'function'），其他都是普通對象（typeof o === 'object'

原創 2024-04-24 23:51:10

前端面試題 - 爲什麼在JS中0.1+0.2!=0.3？以及IEE 754標準

前端面試題 - 爲什麼在JS中0.1+0.2!=0.3？以及IEE 754標準 JavaScript使用Number類型表示數字（整數和浮點數），遵循 IEEE 754 標準 通過64位來表示一個數字。 首先，計算機無法直接對十進制的數字進

原創 2024-04-24 23:51:06

西安站開營！AI 編碼助手通義靈碼幫大學生“整活兒”

如何更好地與 AI 爲伴，做時代的先進開發者？4 月 17 日，阿里雲推出的 AI 編程助手通義靈碼與雲工開物“高校訓練營”走進西安多所高校開啓實操培訓，結合 AI 輔助編程的發展背景、通義靈碼的具體能力和應用實操，幫助在校大學生了解人工智

原創 2024-04-24 21:12:06

「Java開發指南」如何利用MyEclipse啓用Spring DSL？（二）

本教程將引導您通過啓用Spring DSL和使用Service Spring DSL抽象來引導Spring和Spring代碼生成項目，本教程中學習的技能也可以很容易地應用於其他抽象。在本教程中，您將學習如何： 爲Spring DSL初始化

原創 2024-04-24 11:35:31

高效率Python開發工具PyCharm v2024.1——更新AI Assistant功能

JetBrains PyCharm是一種Python IDE，其帶有一整套可以幫助用戶在使用Python語言開發時提高其效率的工具。此外，該IDE提供了一些高級功能，以用於Django框架下的專業Web開發。 立即獲取PyCharm v20

原創 2024-04-23 11:34:45

瀏覽器輸入地址訪問網頁過程

瀏覽器輸入地址 當在瀏覽器中輸入網址的時候，瀏覽器其實就可能的匹配可能得 url 了，它會從歷史記錄，書籤等地方，找到已經輸入的字符串可能對應的 url，然後給出智能提示，讓你可以補全url地址。對於 google的chrome 的瀏覽

原創 2024-04-16 11:34:39

日程安排組件DHTMLX Scheduler v7.0新版亮點 - 擁有多種全新的主題

DHTMLX Scheduler是一個類似於Google日曆的JavaScript日程安排控件，日曆事件通過Ajax動態加載，支持通過拖放功能調整事件日期和時間，事件可以按天、周、月三個種視圖顯示。 備受關注的DHTMLX Schedule

原創 2024-04-11 11:34:05

ES6生成器，看似同步的異步流程控制表達風格

本文分享自華爲雲社區《3月閱讀周·你不知道的JavaScript | ES6生成器，看似同步的異步流程控制表達風格》，作者： 葉一一。 生成器 打破完整運行 JavaScript開發者在代碼中幾乎普遍依賴的一個假定：一個函數一旦開始執行

原創 2024-04-10 22:32:56

「實戰應用」如何用圖表控件LightningChart創建JS堆疊條形圖？

LightningChartJS是Web上性能特高的圖表庫，具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用，從而實現高刷新率和流暢的動畫，常用於貿易，工程，航空航

原創 2024-04-10 11:34:32

界面控件DevExtreme JS & ASP.NET Core 2024年度產品規劃預覽（一）

在本文中我們將介紹今年即將發佈的v24.1附帶的主要特性，這些特性既適用於DevExtreme JavaScript (Angular、React、Vue、jQuery)，也適用於基於DevExtreme的ASP.NET MVC/Core控

原創 2024-04-03 11:34:37