Vue、Vant、Font-awesome、Fastclick等使用记录

Vue基本使用

安装

1
npm install

运行

1
npm run serve

编译

1
npm run build

Customize configuration

See Configuration Reference.

使用Vue-lic创建项目：vue create 项目名

Router路由

  1. index中创建路由对象
  2. 使用按钮替换 (无返回)
1
2
3
itemClick(){
  this.$router.replace(this.path)
}

解决非父子组件之间的通信

  • 使用vuex集中式存储管理
  • 解决多个状态在多个页面共享问题
  • 访问状态：this.$store.state
  • 修改状态：this.$store.commit(‘mutations方法名’,其他参数)
  • 注意：vuex可以追踪状态变化，不要直接使用this.$store.state改变状态，否则会无法追踪

Axios数据请求

  1. 可直接用已封装的request.js拓展使用
  2. 安装
1
npm install axios --save

使用Vant组件

具体见vant官方中文文档

  1. 安装

    1
    npm i vant -S

  2. 引入main.js

  3. 添加配置babel.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset'
      ],
      "plugins": [
        ["import", {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }

4.安装插件 npm i babel-plugin-import -D

BetterScroll，解决移动端滚动卡顿现象

  1. 安装

    1
    npm install better-scroll --save

  2. 引入 import BScorll from ‘better-scroll’

使用ElementUI组件

Element-plus官网：https://element.eleme.cn/#/zh-CN/component

1、npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

1
npm i element-ui -S

2、完全引入（经常使用此方式，所以按需引入自查官网）

在 main.js 中写入以下内容：

1
2
3
4
5
6
7
8
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

fastclick补丁解决移动端存在的300ms延迟问题

  1. 安装

    1
    npm install fastclick --save

  2. main.js中引入

    1
    import FastClick from 'fastclick'

  3. main.js中将fastclick附加到Body

    1
    FastClick.attach(document.body)

webpack插件px2vw-css单位转化，移动端不同手机类型转换

  1. 安装插件

    1
    npm install postcss-px-to-viewport --save-dev

  2. 在项目postcss.config.js中设置相关配置 如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    module.exports = {
      plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport":{
          viewportWidth: 375,//视窗宽度
          viewportHeight: 667,//视窗高度
          unitPrecision: 5,//指定px转换为视窗单位值的小数位数
          viewportUnit: 'vw',//指定需要转换的视窗单位，建议使用vw
          selectorBlackList:['ignore','tab-bar','tab-bar-item'] ,//指定不需要转换的类
          minPixelValue: 1,//小与或等于1px不转换为视窗单位
          mediaQuery: false,//允许在媒体查询中转换px
          exclude:[/TabBar/]//转换会排除有吧TabBar的文件
        }
      }
    }

  3. 若要卸载插件

    1
    npm uninstall postcss-px-to-viewport

font-awesome

  1. 安装

    1
    npm install font-awesome --save

  2. main.js中引入

    1
    import "font-awesome/css/font-awesome.css"

使用MD5加密

1、npm安装

1
npm install --save js-md5

2、使用

（1）第一种使用方法
先需要引入：

1
import md5 from 'js-md5'

然后使用：

1
md5('aaaaa')

（2）第二种使用方法
先使用vue原型转换：

1
2
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

然后在想用的地方这么写：

1
this.$md5('aaaaa')

（3）第三种使用方法
在src目录下新建md5文件夹，文件夹下index.js代码如下

1
2
3
4
5
6
import md5 from 'js-md5'
export default {
  install: function (Vue) {
    Object.defineProperty(Vue.prototype, '$md5', { value: md5 })
  }
}

在main.js引入

1
2
3
import md5 from '../md5/index.js'
Vue.config.productionTip = false
Vue.use(md5)

然后可以在想用的地方使用啦：

1
this.$md5('aaaaa')