vue项目相关配置
一、favicon.ico图标
先看效果图
配置的正是上图海蓝色所圈中的部分。具体怎么配置请继续往下看:
favicon.ico文件路径:
1、、打包后的(生产环境)
可依照上图查找路径进行配置:build → webpack.prod.conf.js →
plugins: [
.......
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
favicon: 'src/assets/img/favicon.ico',
// 相对路径
inject: true,
......
}),
......
]
2、、开发调试中的(开发环境)
同理:
可依照上图查找路径进行配置:build → webpack.dev.conf.js →
plugins: [
.......
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
favicon: 'src/assets/img/favicon.ico',
// 相对路径
inject: true
}),
......
]
二、个人喜欢的相关插件或组件的安装和使用
1、element-ui
npm i element-ui --save
# mian.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
2、stylus
# 安装
npm i stylus stylus-loader --save
3、fastclick
npm i fastclick --save
# main.js中引入
import fastclick from 'fastclick'
fastclick.attach(document.body)
4、axios
# 安装
npm i axios --save
5、MD5加密
# 安装
npm install --save js-md5
使用1:在需要使用的项目文件中引入import md5 from 'js-md5'
使用:
md5('holle') // bcecb35d0a12baad472fbe0392bcc043
使用2:在main.js文件中将md5转换成vue原型:
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
# 在需要用到的文件中使用:
this.$md5('holle') // bcecb35d0a12baad472fbe0392bcc043
可能会持续更新,自己遇到什么自己认为比较突出的问题的解决方案,我就会在里面加。