MUI在vue-cli3的使用

下载方式

• MUI 不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用。

引入方式

• 在 main.js 文件中导入（MUI 类似于 bootstrap。）

// 引入 MUI （@表示 src 文件夹）
import mui from '@/assets/MUI/js/mui.js'
import '@/assets/MUI/css/mui.css'
// 挂载到VUE实例上
Vue.prototype.$mui = mui

• 新建一个 vue.config.js 文件，增加如下配置
  • 下载 webpack 和 path

  $ npm i webpack path -S
  

const webpack = require('webpack');
const path = require('path');
module.exports = {
  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"
      })
    ]
  },
}

忽略 vue-cli3 对 js 文件的严格模式：

• 参考 eslint 的官网https://cn.eslint.org/docs/user-guide/configuring

image.png

• 在 package.json 里面加上下面的语句(你要忽略的js文件位置)

{
  // ...
  "eslintIgnore": [
    "./src/assets/MUI/js/mui.js"
  ],
  // ...
}

在 babel.config.js 文件利添加

"ignore": ["./src/assets/MUI/js/mui.js"]

在主目录新建 .eslintignore 文件，在其中添加以下内容

src/assets/MUI/js/mui.js

取消组件滑动时产生的警告

在样式中加上

* {
touch-action: pan-y
}