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

关于如何在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

要回复文章请先登录注册

潇洒哥gg

潇洒哥gg

mark一下
2019-04-08 13:41
wailen

wailen

回复 我有辣条啊 :
在html页面里面引入的js文件
2019-03-13 20:17
我有辣条啊

我有辣条啊

回复 wailen :
我也遇到你这个问题 ,请问你是怎么解决得啊。
2019-03-11 17:07
8***@qq.com

8***@qq.com

make
2018-12-12 11:47
c***@foxmail.com

c***@foxmail.com (作者)

回复 rem486 :
你看下你的路径是不是正确的
2018-12-10 10:19
rem486

rem486

mui.js 是在哪里下载的呢。通过hbuilder 新建项目拷贝过来的,
"export 'default' (imported as 'mui') was not found in './services/mui.js'
2018-12-02 21:15
1***@qq.com

1***@qq.com

回复 wailen :
在package.json同级目录,修改.babelrc文件,将mui相关js文件设置忽略;添加:
"ignore": [
"./src/assets/mui/js/*.js"
]
2018-10-22 14:55
wailen

wailen

但还是报错了啊,报错内容mui不支持严格模式,vue-cli3.0
2018-10-13 14:36
c***@foxmail.com

c***@foxmail.com (作者)

回复 Aminy :
mui在main引入之后就不需要在每个文件单独引入了
2018-09-12 17:38
Aminy

Aminy

按照vue.config.js中的配置,必须在每个用到mui的文件中通过import引入mui吗?
2018-09-06 16:32