VUE 插件

Element ui

npm i element-ui -S   //下载

//main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Mock.js

npm install axios -S //下载axios

npm install -D mockjs  //下载 mock.js

//main.js

import './mock/index.js'  //引入

运行项目

//main.js 进行配置

import axios from 'axios'
Vue.prototype.$http = axios



//创建一个mock的文件夹，然后在里面js文件里面写接口数据

Mock.mock('/api/demo1/get', 'get', {
  status: 200,
  message: '获取测试数据成功',
  data: ['测试数据1', '测试数据2', '测试数据3']
})


//使用

created () {
    this.$http.get('/api/demo1/get').then(res => {
    	console.log(res)
    })
},



 

  模拟数据请求

//模拟get请求

Mock.mock('/api/demo1/get', 'get', {
  status: 200,
  message: '获取测试数据成功',
  "data|1-20": [
    {
      id: '@increment()',
      title: '@ctitle()',
      price: '@natural(0, 99999)',
      url: '@dataImage("300x300")'
    }
  ]
})


//模拟post请求
Mock.mock('/api/demo1/post', 'post', function(options) {
  console.log('options:', JSON.parse(options.body).title);
  
  return Mock.mock({
    title: '@cword(2,5)'
  })
})

懒加载

npm install vue-lazyload -S   //下载插件

import lazyload from 'vue-lazyload'  // 引入
// 进行初步的配置
Vue.use(lazyload, {
  preLoad: 1.5,
  attempt: 1,
  loading: require('@/static/lodding.gif'),
}) 


//使用
<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

触底刷新

npm install vue-infinite-scroll -S  //下载


//main.js

import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)


//使用
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

Ant design ui 

npm install ant-design-vue --save//下载

//main.js

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

响应式布局

npm install postcss-px-to-viewport -S  下载

在通过vue-cli创建的项目根目录创建.postcssrc.js文件，并且在该文件中添加如下的配置：

const path = require('path')

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(
    path.join('node_modules', 'ant-design-vue')
  )
    ? 375
    : 750

  return {
    plugins: {
      autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      'postcss-px-to-viewport': {
        unitToConvert: 'px', // 要转化的单位
        viewportWidth: designWidth, // UI设计稿的宽度
        unitPrecision: 6, // 转换后的精度，即小数点位数
        propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        exclude: [], // 设置忽略文件，用正则做目录名匹配
        landscape: false, // 是否处理横屏情况
        // replace: true, // 是否转换后直接更换属性值
      },
    },
  }
}

vscode 配置eslint和prettier

首先，需要在vscode上安装eslint和prettier的插件。

在vue项目中，.eslintrc.js文件主要负责eslint的相关配置。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    quotes: ['error', 'single', { allowTemplateLiterals: true }], // 单引号 允许使用反引号
    semi: ['error', 'never'], // 禁止末尾使用分号
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

.prettierrc.js文件负责prettier的规则设置：

module.exports = {
  tabWidth: 2,  // tab
  semi: false,  // 结尾不用分号
  singleQuote: true,  // 使用单引号
  bracketSpacing: true,  // 对象属性前后加空格
  disableLanguages: ['vue'],  // 不格式化vue文件
  endOfLine: 'auto',
}

自动保存