1.关于vue-cli的静态文件加载问题
svg组件化以及图片加载出现的问题
- svg
问题的出现：
vue init webpack app创建项目后，再制作导航栏时需要加载icon于是想到写一个icon集成组件
解决过程:
首先下载svg-sprite-loader(雪碧图)插件，然后再webpack中配置相关选项。如下图中，配置webpack.base.conf.js
再rules下面配置svg文件的加载方式
{
test: /\.svg$/, // 这行是用来匹配svg文件的
loader: 'svg-sprite-loader', // 这行是配置svg文件的加载项，用雪碧图加载(插件没下载会导致无法加载)
include: resolve('src/icons'), // 这行表示加载svg的路径， 一会要在这个路径下写加载的配置，添加存放文件的目录
options: {
limit: 1000,
symbolId: 'icon-[name]' //这块是雪碧图的原理所在，将每个icon包在symbol中在use元素中引用
}
}
然后开始写组件: 在components目录下出创建SvgIcon目录，然后在此目录下创建index.vue
代码如下：
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: "SvgIcon",
props: {
type: {
type: String,
require: true
},
},
mounted() {
},
computed: {
iconName() {
return `#icon-${this.type}` // 这块对应webpack配置中的symbolId 也就是用来识别svg文件名字的
},
svgClass() { // svgClass 是改样式的，这个可以按自己意愿传值，为了方便我就直接把svg文件名当类名了
if(this.iconName) {
return this.type
}else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped> // 默认样式
.svg-icon {
width: 1rem;
height: 1rem;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
到这结束了配置和组件化，接下来就是文件处理和使用了:在src下创建一个icons目录,然后index.js处理文件，svg目录存放文件,这个目录结构是对照webpack的配置写的
index.js 代码：
import Vue from 'vue'
import SvgIcon from '../components/SvgIcon'// svg组件
// register globally
Vue.component('icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
requireAll(req)
然后再main.js中引入这个文件，挂载icon组件就可以了
import './icons'
最后在页面中使用，实现svg的渲染
<icon type="search"/> // 这个文件存放在src/icons/svg下面，文件名search.svg就只需要这一行代码（就很方便）
然而到此并无法显示，我这里直接写我解决这个问题的方法，其实也很简单
在配置webpack时,没有取消url-loader对svg文件的加载，所以默认的加载方式覆盖掉了雪碧图加载，只需要回到build下的webpack.base.conf.js文件，将下图中的|svg删掉就好了
然后说另一个方法（我试过不好使，我也不明白为什么）,而且这样会导致img无法正常解析:
使用exclude将目录下的文件从url-loader中去掉
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
exclude: [resolve('src/icons')],
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
2. 关于vue使用图片遍历的问题以及样式处理
-
在我这个项目里使用了element-ui,我想用走马灯组件做个轮播，然而我发现图片加载不出来；在网上翻了一下,直接用require就好了
-
样式处理时遇到的问题
走马灯的下面的两个按钮，需要自定义样式，但是我发现怎么也选不到激活的那个按钮(.is-active), 我翻了一堆element的文章，都不对，然后仔细检查了一下代码，发现这里两个类名之间多写了一个空格(草，血压上来了)
image.png
3.关于连接代理后github连不上（可以正常访问网站，但是无法推代码）
这个问题之前一直就有，但是它总是时连时断，我就没管，今天我发现我断开代理，清空git的http.proxy之后还是连不上，就去stack overflow上查了一下，加上自己代理的端口就好了
git config --global --add remote.origin.proxy "127.0.0.1:(proxy http port number)"
