快速創建
使用官方推薦的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搭建的項目環境不需要