vue脚手架导入mui.js的问题

一、配置webpack+vue-cli项目初始化

webpack初始化一个 化一个项目，并且安装依赖。

默认安装了node.js的前提，cd 进入指定目录

npm install webpack -g  --全局安装

webpack -v --查看版本是否安装成功

//webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令

npm install webpack webpack-cli -g

npm install --global vue-cli       --安装vue-cli

vue -V         --安装完成查看版本


vue init webpack 项目名称   --创建项目 以下可以根据选项一路Enter安装完成


npm install        --要cd进入工程目录

npm run dev    --运行成功可访问



   

 二、mui导入

1. 修改文件 /build/webpack.base.conf.js,主要添加mui这一项

 

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'mui': path.resolve(__dirname, '../src/lib/mui/js/mui.min.js'),
    },
    
  },

2.修改  /build/webpack.dev.conf.js   在plugins中添加下句

 plugins: [
    new webpack.ProvidePlugin({
      mui: "mui",
      "window.mui": "mui"
  }),

3.修改.babelrc文件，添加mui引用文件，注意路径，一定要正确可访问，这句是忽略mui非严格模式报错。

  "plugins": [
    "transform-vue-jsx",
    "transform-runtime"
  ]
  ,
  "ignore": [
    "./src/lib/mui/js/mui.min.js"
  ],

4.修改.eslintignore文件，同上加文件路径，这句测试时，与没加是没有区别。执行到第三步时，mui已经可以正常使用，不再报错了。注：这些修改的文件都是初始化之后，按照以上步骤安装，生成在根目录的。