2. 程式人生 > 實用技巧 >使用vue-cli4快速搭建專案環境、使用webpack4打包自己的library類庫、封裝vue外掛併發布

使用vue-cli4快速搭建專案環境、使用webpack4打包自己的library類庫、封裝vue外掛併發布

阿新 • • 發佈：2020-08-13

快速建立

使用官方推薦的vue-cli建立專案如下：

# 安裝 Vue Cli 
npm install -g @vue/cli

# 建立一個專案 
vue create vanttest

# 建立完成後，可以通過命令開啟圖形化介面
vue ui

下面記錄下建立一個專案中需要選擇的配置及相關說明。

建立專案

按照上面命令，我們先全域性按照vue cli，執行建立一個專案：

vue create vuecli4

手動配置

如圖所示：

  • 選項一default：babel、eslint（預設配置）
  • 選項二Manually select features：手動選擇配置，這裡選擇手動選擇。

選擇手動配置項

如圖所示：

上面的選擇怎麼選擇呢？記住以下幾條：

  • 按空格選中或取消選中
  • 按a是全選
  • 按i是反選

其中每條的意思如下：

( ) Babel //轉碼器，可以將ES6程式碼轉為ES5程式碼，從而在現有環境執行。 
( ) TypeScript// TypeScript是一個JavaScript（字尾.js）的超集（字尾.ts）包含並擴充套件了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器執行
( ) Progressive Web App (PWA) Support// 漸進式Web應用程式
( ) Router // vue-router（vue路由）
( ) Vuex //
 
 vuex（vue的狀態管理模式）
( ) CSS Pre-processors // CSS 前處理器（如：less、sass）
( ) Linter / Formatter // 程式碼風格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end） 測試

這兒我們選擇常規的幾項如圖所示：

選擇是否使用history router

Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由。
這兒我選擇不需要n，打包後直接放到伺服器就能使用（選yes的話需要伺服器進行設定）。

選擇css前處理器

說明：node-sass是自動編譯實時的，dart-sass需要儲存後才會生效。sass 官方目前主力推dart-sass最新的特性都會在這個上面先實現。

vuecli3版本用的node-sass，這兒我也還是選擇node-sass。

選擇eslint程式碼驗證規則

如圖所示：

  • 只預防
  • airbnb配置
  • 標準配置
  • 最高配置
說明：Airbnb配置是指，它依賴eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等外掛，並且對各個外掛的版本有所要求。
你可以執行以下命令檢視所依賴的各個版本：
npm info "eslint-config-airbnb@latest" peerDependencies

得到的結果：

{ eslint: '^5.16.0 || ^6.8.0',
  'eslint-plugin-import': '^2.20.1',
  'eslint-plugin-jsx-a11y': '^6.2.3',
  'eslint-plugin-react': '^7.19.0',
  'eslint-plugin-react-hooks': '^2.5.0 || ^1.7.0' }

這兒選擇最高配置Prettier。
eslint參考文章：

程式碼規則檢測時機

如圖所示：

  • Lint on save：儲存就檢測
  • Lint and fix on commit：fix和commit時候檢查

我選擇儲存就檢測。

選擇如何存放配置

  • In dedicated config files：獨立檔案放置
  • In package.json：放package.json裡

我選擇獨立檔案放置。

是否儲存當前配置為將來專案的預設

選擇n,不需要。

等待建立專案

等待安裝成功後如下圖所示：

根據上圖提示，進入建立的專案，再執行npm run serve即可。

cd vuecli4
npm run serve

最後localhost:8080訪問就行

生成的目錄結構如下圖：

webpack4打包自己的library類庫

在工程目錄下建類庫

例如，工程目錄下建lib/common.js，如下簡單程式碼：

function ArraySum(arr=[]) {
    return arr.reduce((pre,cur) => {
        return pre + cur;
    },0)
}

export default {
    ArraySum
}

打包配置

在工程根目錄下建一個lib.config.js，如下程式碼：

var path = require('path');

module.exports = {
    entry: {
        'common': './lib/common.js'
    },
    mode: 'production',
    output: {
        path: path.resolve(__dirname,'./libdist'),
        publicPath: './',
        libraryExport: 'default', // 對外暴露default屬性，就可以直接呼叫default裡的屬性
        library: 'testview', // // 指定類庫名,主要用於直接引用的方式(比如使用script 標籤)
        libraryTarget: 'umd',  // 定義打包方式
        globalObject: 'this',
        umdNamedDefine: true,
        filename: 'test.common.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [path.resolve(__dirname,'lib')],
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    }
}

在package.json中scripts新加一條命令：

"build:lib": "webpack --config lib.config.js",

安裝webpack、webpack-cli以及babel-loader

npm i webpack webpack-cli babel-loader -D

由於使用vue-cli4初始化專案時，已經添加了babel.config.js，因此不用新增babelrc檔案。

執行npm run build:lib，就會執行打包操作，最後在根目錄下生成一個libdist/test.common.js

我們可以在main.js中匯入該外掛驗證下，如圖：

vue外掛開發

編寫外掛

在當前根路徑下建立packages/header/目錄，在當前目錄下建立如圖結構：

index.js程式碼如下：

import itHeader from './src/header.vue';

itHeader.install = function(Vue) {
    Vue.component(itHeader.name,itHeader);
}

export default itHeader;

header.vue程式碼如下：

<template>
    <div class="header-top">
        <slot :data="navList">
            <div>這是一個頭部</div>
        </slot>
    </div>
</template>

<script>
    export default {
        name: 'it-header',
        data() {
            return {
                navList:[
                    {id: 1, name: '列表服務一'},
                    {id: 2, name: '列表服務二'}
                ]
            }
        }
    }
</script>

<style scoped="scoped">
.header-top    {
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: #000066;
    color: #fff;
    font-size: 14px;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
}
</style>

修改建立上段內容建立的類庫程式碼為（lib/common.js）：

export function ArraySum(arr=[]) {
    return arr.reduce((pre,cur) => {
        return pre + cur;
    },0)
}

把這個類庫程式碼跟上面的外掛放入一個index.js方便打包，比如我放到src/components/index.js中，程式碼如下：

import itHeader from '../../packages/header/index.js';
import * as utilsFns from '../../lib/common.js';

const components = [
    itHeader,
    utilsFns
]

// 方法掛載到Vue原型鏈上
const install = function(Vue, opts = {}) {
    components.forEach(component => {
        if (component !== utilsFns) {
            Vue.component(component.name, component);
        } else {
            Object.keys(component).forEach((key) => {
                Vue.prototype['$' + key] = component[key];
            })
        }
    });
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue);
     Object.keys(utilsFns).forEach((key) => {
       Vue.prototype['$' + key] = utilsFns[key];
     })

}

export default {
    version: '1.0.0',
    install,
    utilsFns,
    itHeader
}

上面寫法簡單說明下：

  • 如果是import引入預設default內容，如：import itview from '../libdist/test.common.js'，那麼類庫方法都會繫結到Vue原型鏈上；
  • 如果是import {itHeader,utilsFns} from '../libdist/test.common.js'，那麼類庫方法在utilsFns物件上，自己處理

修改打包配置檔案

上面建立的lib.config.js程式碼修改如下：

var path = require('path');
var VueLoaderPlugin = require('vue-loader/lib/plugin');
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
module.exports = {
    entry: {
        'common': './src/components/index.js'
    },
    mode: 'production',
    output: {
        path: path.resolve(__dirname, './libdist'),
        publicPath: './',
        libraryExport: 'default', // 對外暴露default屬性，就可以直接呼叫default裡的屬性
        library: 'testview', // // 指定類庫名,主要用於直接引用的方式(比如使用script 標籤)
        libraryTarget: 'umd', // 定義打包方式
        globalObject: 'this',
        umdNamedDefine: true,
        filename: 'test.common.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.css$/,
                loader:['style-loader','css-loader','sass-loader']
            }
        ]
        
    },
    plugins: [
        new ProgressBarPlugin(),
        new VueLoaderPlugin()
    ]
}

安裝loader、外掛

由於是打包vue，所以需要安裝vue-loader;vue頁面中引入有樣式，需要安裝style-loader、css-loader,不需要安裝sass-loader(初始化專案時已經安裝)。

npm i vue-loader style-loader css-loader -D

特別說明，需要在配置檔案中新增，如下程式碼：

var VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
 // 省略程式碼
 plugins: [
        new VueLoaderPlugin()
    ]
}

由於打包支援全部引入以及按需引入，在低版本的vue-cli中需要藉助 babel-plugin-component，以達到減小專案體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component -D

將 .babelrc 新增如下程式碼：

 "plugins": [
      [
        "component",
        {
          "libraryName": "testview"
        }
      ]
    ]

可參考element-ui官網的按需載入配置說明：https://element.eleme.cn/#/zh-CN/component/quickstart

外掛的封裝理解可參考：《vue從入門到進階：自定義指令directive，外掛的封裝以及混合mixins（七）》

注：當前vue-cli4搭建的專案環境不需要

參考地址

相關推薦

使用vue-cli4快速搭建專案環境、使用webpack4打包自己的library類庫、封裝vue外掛併發布

快速建立 使用官方推薦的vue-cli建立專案如下： # 安裝 Vue Cli npm install -g @vue/cli

vue-cli4.5.x快速搭建專案

一、安裝vue-cli npm i @vue/cli -g 二、建立專案 vue-cli會建立一個完整的專案資料夾,內部包含src等,我們僅需要cd進打算放置這個專案檔案的資料夾內執行如下程式碼即可;

Vue-cli4.0快速搭建專案

Vue-cli4.0快速搭建一個專案 　　搭建專案之前，請確認好你自己已經安裝過node, npm或者cnpm, vue-cli。

vue cli4.0 快速搭建專案詳解 （轉）

原文地址：https://www.cnblogs.com/sese/p/11712275.html 搭建專案之前，請確認好你自己已經安裝過node, npm, vue cli。沒安裝的可以參考下面的連結安裝。

使用vue cli4.x搭建vue專案的過程詳解

cli-4.x已經發布好久了，斟酌了好久，還是決定將原來的cli-2.x升級到4.x,詳細的升級過程可以戳這裡

使用vue-cli（vue腳手架）快速搭建專案

vue-cli 是一個官方釋出 vue.js 專案腳手架，使用 vue-cli 可以快速建立 vue 專案。這篇文章將會從實操的角度，介紹整個搭建的過程。

vue-cli4腳手架搭建二

vue-cli4腳手架搭建一 vue create vue3 cd vue3 yarn serve http://localhost:8080/#/ main.js檔案 import Vue from \'vue\'

vue-cli4腳手架搭建三

元件傳值 <script> import LunBo from \"./LunBo\"; export default { name: \'Home\', components: {LunBo},

快速搭建Docker環境

本教程介紹如何快速搭建Docker環境，並使用Docker部署一個Nginx服務。 體驗目標

快速搭建LNMP環境

Nginx是一款小巧而高效的Web伺服器軟體，可幫您在Linux系統下快速方便地搭建出LNMP Web服務環境。本教程介紹如何搭建LNMP環境，其中...

快速搭建LAMP環境

本教程介紹如何搭建LAMP環境，其中LAMP分別代表Linux、Apache、MySQL和PHP。 體驗目標

《快速搭建LNMP環境》

體驗平臺簡介 阿里雲開發者實驗室提供免費雲資源和豐富的場景化實踐，旨在幫助開發者在學習應用技術，瞭解阿里雲產品的特性。

阿里雲體驗實驗室 教你《快速搭建Docker環境》

體驗平臺簡介 阿里雲開發者實驗室提供免費雲資源和豐富的場景化實踐，旨在幫助開發者在學習應用技術，瞭解阿里雲產品的特性。

如何《快速搭建LAMP環境》

阿里雲體驗平臺簡介 阿里雲開發者實驗室提供免費雲資源和豐富的場景化實踐，旨在幫助開發者在學習應用技術，瞭解阿里雲產品的特性。

CentOS7上快速搭建LAMP環境

首先 確保CentOS7上網路配置正確，可以正常訪問網際網路。 確保已經關閉了iptables。

vue-cli腳手架搭建專案

1.npm i -g @vue/cli 2. vue --version 3. vue create 專案名稱 或者vue ui(介面性建立專案) 第一次配置

vue-cli3.0 搭建專案模版教程（ts+vuex+axios）

vue-cli3.0 搭建專案模版教程（ts+vuex+axios） 1.本文模版不適用於小型專案，兩三個頁面的也沒必要用vue

基於ECS快速搭建Docker環境

場景介紹 教程介紹如何快速搭建Docker環境，並使用Docker部署一個Nginx服務。 背景知識

CentOS 下使用 Docker 快速搭建 LNMP 環境

一、安裝 Docker 更新 yum 包 yum -y update 解除安裝舊版本（如果之前安裝過的話） yum remove dockerdocker-common docker-selinux docker-engine

基於Docker快速搭建Es環境

基於Docker快速搭建Es環境 搭建Elasticsearch 下載映象 docker pull elasticsearch:7.6.2 建立掛載目錄