c***@foxmail.com
c***@foxmail.com
  • 发布:2018-07-26 10:39
  • 更新:2019-04-08 13:41
  • 阅读:19536

关于如何在vue-cli中引入mui.js和相关扩展

分类:MUI
mui

一、静态资源引入
如果只用到mui.js可以通过静态资源引入的方式,直接在index.html中通过script标签引入。
二、通过webpack引入
我项目中需要用到picker扩展,所以需要用到picker.js和poppicker.js。如果用静态资源引入的方式在调用new mui.PopPicker()的时候会报mui.PopPicker is not a constructor
参照vue-cli引入jq的方式配置webpack

const webpack = require('webpack');  
const path = require('path');  
resolve: {  
    alias: {  
      'src': path.resolve(__dirname, '../src'),,  
      // 2. 定义别名和插件位置  
      'mui': path.resolve(__dirname, '../src/assets/mui/js/mui.js')   
    }  
  },  
  plugins: [  
    new webpack.ProvidePlugin({  
        mui: "mui",  
        "window.mui": "mui"  
    })  
  ]

最新的vue-cli3.0配置vue.config.js
// vue.config.js

const webpack = require('webpack');  
const path = require('path');  
chainWebpack: (config) => {  
    config.resolve.alias  
      .set('@', path.resolve(__dirname, './src'))  
      .set('mui', path.resolve(__dirname, './src/assets/mui/js/mui.js'))  
  },  
  configureWebpack: {      
    // 增加一个plugins  
    plugins: [  
      new webpack.ProvidePlugin({  
        mui: "mui",  
        "window.mui": "mui"  
      })  
    ]  
  },

然后在需要用到的组件中就可以按需引入了
test.vue

import mui from '@/assets/mui/js/mui.js';  
require('@/assets/mui/js/mui.picker.js');  
require('@/assets/mui/js/mui.poppicker.js');

也可以在main.js中全局引入mui然后扩展部分按需引入
main.js

import mui from '@/assets/mui/js/mui.js';  
// 可以顺便绑定到Vue实例  
Vue.prototype.$mui = mui;

test.vue

require('@/assets/mui/js/mui.picker.js');  
require('@/assets/mui/js/mui.poppicker.js');
2 关注 分享
Trust 1***@qq.com

要回复文章请先登录注册

Aminy

Aminy

按第一种发放引入报错
2018-09-06 14:50