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

可能會持續更新，自己遇到什麼自己認爲比較突出的問題的解決方案，我就會在裏面加。