利用vue-cli创建vue demo
代码语言：javascript复制vue create demo
// 根据提示，创建成功后
// cd demo
// npm run serve根目录创建vue.config.js文件 基本配置，configureWebpack属性，值是对象时的配置
代码语言：javascript复制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属性，值是函数时的配置
代码语言：javascript复制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')
},
}// 牛人总是姿势多，chainWebpack，链式配置，近来使用最多的，可能看着高大尚一些，
代码语言：javascript复制 // 链式配置 看着牛逼一些，类似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]'
})
}查看当前webpack配置详情
代码语言：javascript复制vue inspect --icons svg //看看效果按照配置创建文件，src根目录创建icons/svg/文件夹，里面存储svg后缀的文件
image.png
阿里矢量图库随便下载一个小图
代码语言：javascript复制<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>components目录中创建一个组件SvgIcon.vue
代码语言：javascript复制<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>利用node.js读文件，自动加载icons/svg目录下所有的svg文件,并且注册全局组件
代码语言：javascript复制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)main.js中，引入上面创建的js文件，让他在打包时执行
代码语言：javascript复制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')配完试一下
代码语言：javascript复制<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>很骚气，以后想加别的icon，直接把svg文件往icons/svg目录中扔就ok了
环境变量的配置
根目录创建.env.development和.env.production
代码语言：javascript复制abc='只能在服务器端获取'
VUE_APP_ABC='可穿梭在服务器和浏览器之间的变量'可在启动项目脚本中指定模式名称，webpack会读取对应的.env.[name]文件
代码语言：javascript复制vue-cli-service serve --mode dev
