最佳Vue的細節操做

webapck配置文件 vue.config.js

// commonjs nodejs
const port = 7070
const title = 'vue的最佳實踐'
module.exports = {
  // 程序的上下文
  publicPath: 'best-practice',
  devServer: {
    port
  },
  configureWebpack: {
    name: title
  }
}

index.html

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

image.png
image.png
命令行命令
vue inspect webapck的全部配置html

vue inspect --rules 查看webapck中的rules規則模塊
image.pngvue

vue inspect --rule vue 查看單個模塊中的規則
image.pngnode

vue inspect --plugins 能夠查看配置中的全部插件
image.pngwebpack

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()
  }
}

image.png

封裝成組件 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動態添加的頁面**待。。。

相關文章
相關標籤/搜索