vue菜鸡实践

vue create demo
// 根据提示，创建成功后
// cd demo
// npm run serve

const path = require('path')
const resolve = src => path.join(__dirname, src)
const port = 7777 
module.exports = {
    publicPath: '/best-parctice',
    devServer: {
        port //修改dev默认端口
    },

    configureWebpack:{
        name:'tom is cat',
        //加个别名
        resolve:{
            alias:{
                comps:resolve('src/components')
            }
        }
    },
}

const path = require('path')
const resolve = src => path.join(__dirname, src)
const port = 7777 
module.exports = {
    publicPath: '/best-parctice',
    devServer: {
        port //修改dev默认端口
    },

    // configureWebpack:{
    //     name:'tom is cat',
    //     //加个别名
    //     resolve:{
    //         alias:{
    //             comps:resolve('src/components')
    //         }
    //     }
    // },
    // 除了上面方式，还可以是个函数
    configureWebpack:config=> {
        // config就是传入的webpack配置对象
        // 可以直接加工，也可以返回一个对象，最终都会和传入的baseconfig merge        
        if(process.env.NODE_ENV='develoment'){
            config.name='vue 项目最基础实践'
        }else{
            config.name="vue牛逼实践"
        }
        config.resolve.alias.comps=resolve('src/components')
    },
}

 // 链式配置 看着牛逼一些，类似jquey链式调用
    chainWebpack(config){
        // 使用 svg icon ,配置 svg-sprite-loader    
        // 找到svg 默认的处理规则，将某个目录排除处理里的范围
        config.module.rule('svg')
            .exclude.add(resolve('src/icons'))
        // 新加一个icons的处理规则,用svg-sprite-loader处理，将上面那个目录添加  到这个规则的处理范围内
        config.module.rule('icons')
            .test(/\.(svg)(\?.*)?$/)
            .include.add(resolve('src/icons')).end()
            .use()
                .loader('svg-sprite-loader')
                .options({
                    symbolId:'icon-[name]'
                })
    }

vue inspect --icons svg //看看效果

<svg t="1605408690360" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1203" width="200" height="200"><path d="M392.9 259.1s-87.2 46.1-93.7 174.4c-3.2 63.2 53.6 133.8 53.6 133.8l160.1 171.4-64.7 57.1-295.3-286.5S45.7 385 137.2 282.4s193.6-60.2 193.6-60.2l62.1 36.9zM565.6 588.2l218.6 224.2-52.2 39.5-184.7-182.1z" fill="#E74291" p-id="1204"></path><path d="M900.2 559.8l-1.7-1.7c-20.2-20.2-47.2-31.4-75.9-31.5h-0.2c-28.7 0-55.5 11.1-75.6 31.2l-14 14-12.9-12.8c-1.1-1.1-2.3-2.2-3.4-3.3l31-31c74.1-74.1 73.5-195.1-1.2-269.9l-3.1-3.1c-35.1-35.1-81.8-54.4-131.6-54.4h-0.1c-49.5 0-95.8 19.2-130.5 53.9L445.3 287l-33.5-33.5c-35.9-35.9-83.8-55.8-134.8-55.8h-0.2c-51 0-98.9 19.8-134.9 55.8l-3.1 3.1c-34.8 34.8-53.9 81.3-53.7 130.9 0.1 49.6 19.4 96.2 54.4 131.1l270.1 270.8c9.8 9.8 22.9 15.3 36.7 15.3 13.8 0 26.8-5.4 36.5-15.1l78.6-78.6c0.4 0.5 0.9 0.9 1.3 1.4L696 846c10 10 23.2 15.5 37.3 15.5 14 0 27.2-5.4 37.1-15.3l130.5-130.5c42.8-42.8 42.5-112.8-0.7-155.9zM460.1 766.9c-3.7 3.7-8.6 5.7-13.9 5.7-5.3 0-10.3-2.1-14.1-5.9l-270-270.8c-28.9-28.9-44.9-67.4-45-108.5-0.1-41.1 15.6-79.5 44.4-108.2l3.1-3.1c29.9-29.9 69.8-46.4 112.2-46.4h0.2c42.5 0 82.3 16.5 112.2 46.4L434 321c6.2 6.3 16.4 6.3 22.6 0 0.6-0.6 1.1-1.3 1.6-2 0.7-0.5 1.3-1 1.9-1.6l43.4-43.5c28.6-28.7 66.9-44.5 107.9-44.5h0.1c41.2 0 80 16 109 45l3.1 3.1c62.3 62.3 62.8 163 1.2 224.6l-35.4 35.4c-14.6-7-30.8-10.7-47.5-10.7h-0.1c-29.5 0-57.1 11.4-77.9 32.2l-1.7 1.7c-20.1 20.1-31.2 47.1-31.1 75.8 0 17 4 33.3 11.3 48l-82.3 82.4zM878.3 693L747.8 823.5c-3.8 3.8-9 6-14.4 6-5.5 0-10.8-2.2-14.7-6.1L585.3 689.7c-14.2-14.2-22-33.1-22.1-53.3-0.1-20.1 7.7-39 21.8-53.1l1.7-1.7c14.7-14.7 34.4-22.8 55.3-22.8h0.1c20.9 0 40.6 8.1 55.3 22.9l24.2 24.2c6.2 6.2 16.4 6.3 22.6 0 0.3-0.3 0.6-0.7 0.9-1 0.3-0.3 0.7-0.6 1-0.9l23.4-23.4c14.1-14.1 32.9-21.8 53-21.8h0.2c20.2 0 39.2 7.9 53.4 22.1l1.7 1.7c30.5 30.5 30.8 80.1 0.5 110.4z" fill="#4C3441" p-id="1205"></path><path d="M692.3 367.2c-6.4 0-12.4-3.8-14.9-10.1-0.1-0.2-10.4-25.5-29.1-36.4-19-11.1-35.7-9.2-35.9-9.2-8.7 1.3-16.9-4.7-18.2-13.5-1.3-8.7 4.7-16.9 13.5-18.2 2.8-0.4 28-3.6 56.7 13.2 28.3 16.6 42.1 50.9 42.7 52.3 3.2 8.2-0.8 17.5-9 20.8-1.9 0.7-3.9 1.1-5.8 1.1z" fill="#4C3441" p-id="1206"></path></svg>

<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 scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
// 自动加载svg目录中的svg文件
// context()返回的函数是指定上下文路径的require函数
// 遍历当前目录./svg目录下的所有.svg后缀文件，不深度遍历
const req = require.context('./svg', false, /\.svg$/)
// keys方法返回文件名集合
req.keys().forEach(req)
// 注册全局组件SvgIcon
Vue.component('SvgIcon',SvgIcon)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 这句话
import './icons/index.js'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">
      <svg-icon iconClass="aiqing"></svg-icon>
      Home</router-link>
      |
      <router-link to="/about">
      <svg-icon iconClass="gou"></svg-icon>
      
      About</router-link>
    </div>
    <router-view />
  </div>
</template>

abc='只能在服务器端获取'
VUE_APP_ABC='可穿梭在服务器和浏览器之间的变量'

vue-cli-service serve --mode dev