vue项目相关配置

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

可能会持续更新，自己遇到什么自己认为比较突出的问题的解决方案，我就会在里面加。