// commonjs nodejs const port = 7070 const title = 'vue的最佳實踐' module.exports = { // 程序的上下文 publicPath: 'best-practice', devServer: { port }, configureWebpack: { name: title } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- webpack的佔位符 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
命令行命令
vue inspect webapck的全部配置html
vue inspect --rules 查看webapck中的rules規則模塊
vue
vue inspect --rule vue 查看單個模塊中的規則
node
vue inspect --plugins 能夠查看配置中的全部插件
webpack
vue inspect --plugin vue-loader 單個插件的配置項web
項目要使用icon,傳統方案圖標字體(字體文件+樣式文件),不便維護,
svg方案採用svg-sprite-loader 自動加載打包,方便維護
使用icon前先安裝依賴:svg-sprite-loadernpm
npm i svg-sprite-loader -D
下載圖標,存入src/icons/svg中 修改規則和新增規則,vue.confifig.jsapp
// resolve定義一個絕對路徑獲取函數 const path = require('path') function resolve (dir) { return path.join(__dirname, dir) } // commonjs nodejs const port = 7070 const title = 'vue的最佳實踐' module.exports = { // 程序的上下文 //publicPath: 'best-practice', devServer: { port }, configureWebpack: { name: title }, // 鏈式webapck的配置 對config進行鏈式操做 chainWebpack (config) { // module中是全部的規則 獲取svg // svg規則配置一下,排除icons目錄 config.module.rule('svg') .exclude.add(resolve('src/icons')) .end() // 若是遇到icons目錄 就退回上一級 // 新增icons規則 設置svg-sprite-loader config.module .rule('icons')// 定義一個規則 .test(/\.svg$/) // 什麼文件的後綴名 .include.add(resolve('src/icons')) // 規則對應的測試的地址 .end() .use('svg-sprite-loader') // 應用一下svg-sprite-loader .loader('svg-sprite-loader') // 找到它的loader 給他作進一步的配置 .options({ symbolId: 'icon-[name]' }) // 選項配置 symbolId表示未來以什麼方式使用圖標 .end() } }
封裝成組件 components/SvgIcon.vueless
<template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href="iconName"/> </svg> </template> <script> export default { name: 'SvgIcon', props: { iconClass: { type: String, required: true }, className: { type: String, default: '' } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon' + this.className } else { return 'svg-icon' } } } } </script> <style lang="less" scoped> .svg-icon{ width: 1em; height:1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
在svg同文件夾下建立一個index.jsasync
import Vue from 'vue' import SvgIcon from '@/components/SvgIcon.vue' // 全局引入SvgIcon組件 Vue.component('svg-icon', SvgIcon) // require.context webapck中的方法 const req = require.context('./svg', false, /\.svg$/) // ['qq.svg', 'wx.svg'] req.keys().map(req)
main.js中全局引入index.jssvg
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import './icons' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
直接全局使用
<template> <div id="app"> <div id="nav"> <router-link to="/">Home <svg-icon icon-class="qq"></svg-icon></router-link> | <router-link to="/about">About<svg-icon icon-class="xm"></svg-icon></router-link> </div> <router-view/> </div> </template>
路由定義
路由分爲兩種 constantRouters 和 asyncRouters**constantRoutes:表明那些不須要動態判斷權限的路由,如登陸、看板、404等通用頁面asyncRoutes:表明那些須要判斷權限並經過addRoutes動態添加的頁面**待。。。