vue專案中使用svg
引入依賴
yarn add svg-sprite-loader -d
[可選] yarn add svgo svgo-loader -d
依賴說明：
svg-sprite-loader
sprites 會被自動渲染和注入頁面，您只需通過
工作原理是: 利用svg的symbol元素，將每個icon包括在symbol中，通過use元素使用該symbol.
svgo svgo-loader用於精簡 svg **
1.在src/icons/svg存放icon向量圖（以.svg結尾）
2.svg 目錄主要用於存放 svg 檔案，來看一下 index.js 的內容，功能就是把元件註冊到全域性，方便使用：
在src/icons/index.js中使用webpack的require.context自動引入src/icons下面所有的圖示。
import vue from 'vue'
import svgicon from '@/components/svgicon'// svg元件
// register globally
vue.component('svg-icon', svgicon)
const requireall = requirecontext => requirecontext.keys().map(requirecontext);
/** * require.context(directory,usesubdirectories,regexp)
* require.context():需要一次性的引入某個資料夾下的所有檔案
形參：directory：需要引入檔案的目錄
usesubdirectories：是否查詢該目錄下的子級目錄
regexp：匹配引入檔案的正規表示式
*/const req = require.context('./svg', false, /\.svg$/);
requireall(req)
import '@/icons';//引入svg模板這裡就會使用 src/icons/svg/example.svg 檔案。
因為此專案是vue cli3 所以對 vue.config.js 進行配置
chainwebpack: config => "`
return args
})// svg rule loader
const svgrule = config.module.rule('svg') // 找到svg-loader
svgrule.uses.clear() // 清除已有的loader, 如果不這樣做會新增在此loader之後
svgrule.exclude.add(/node_modules/) // 正則匹配排除node_modules目錄
svgrule // 新增svg新的loader處理
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options()
// 修改images loader 新增svg處理
const imagesrule = config.module.rule('images')
imagesrule.exclude.add(resolve('src/icons'))
config.module
.rule('images')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
},
vue專案中操作PDF檔案
以前從來沒接觸過前端要求顯示pdf檔案，一時之間有點懵逼，不知從哪下手啊.無奈之下，去找度娘，方法還不少，iframeembedobject這些標籤就可以，可是拿過來做個demo一試，並沒有什麼卵用，網頁中可以顯示pdf，但是頁面上就是出不來，反正我是沒有試成功 還有pdfobject pdf.js...
在vue專案中優雅的使用Svg
本文主要以 vue cli3 搭建的專案為例，來聊一下如何在專案中更優雅的使用 svg 眾所周知，vue cli3 已經推出很長一段時間了，大家可以感受一下 vue cli3 帶來的零配置體驗。but，也相應帶來了一些弊端，就是如歸需要修改預設的 loader 時，會比較麻煩。好了，上正題，建議看此...
vue專案svg使用
檔案 const path require path 傳遞乙個相對路徑，會處理得到乙個相對路徑 function resolve dir module.exports end 此時其實已經可以使用了 template中 icon qq use svg 在script中 import icons sv...