欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue项目相关配置

程序员文章站 2024-02-15 15:06:58
...

vue项目相关配置

一、favicon.ico图标

先看效果图
vue项目相关配置
配置的正是上图海蓝色所圈中的部分。具体怎么配置请继续往下看:
favicon.ico文件路径:
vue项目相关配置

1、、打包后的(生产环境)

vue项目相关配置
可依照上图查找路径进行配置:build → webpack.prod.conf.js →

plugins: [
	.......
   new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      favicon: 'src/assets/img/favicon.ico',
      // 相对路径
      inject: true,
      ......
    }),
  ......
  ]

2、、开发调试中的(开发环境)

同理:
vue项目相关配置
可依照上图查找路径进行配置: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

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