一、静态资源引入
如果只用到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');
11 个评论
要回复文章请先登录或注册
潇洒哥gg
wailen
我有辣条啊
8***@qq.com
c***@foxmail.com (作者)
rem486
1***@qq.com
wailen
c***@foxmail.com (作者)
Aminy