Vue学习笔记

配置jQuery支持

// 安装jquery
// npm i jquery

// 配置vue.config.js
configureWebpack: {
  plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
  ]
}

vue-cli按需引入vant

• 安装vant

npm i vant -S
npm i babel-plugin-import -D

• 配置babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      {
        libraryName: "vant",
        libraryDirectory: "es",
        style: true
      },
      "vant"
    ]
  ]
};

• 在页面中引入要使用的组件即可，例如

<template>
  <van-cell>vant</van-cell>
</template>

<scrpit lang="ts">
  import Vue from 'vue';
  import Component from 'vue-class-component';
  import { Cell } from 'vant';

  @Component({
    components: { [Cell.name]: Cell }
  })
  export default class Demo extends Vue {}
</script>

vue-cli按需引入element

• 安装

npm i element-ui -S
npm i babel-plugin-component -D

• 配置babel.config.js

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};