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已经可以正常使用,不再报错了。注:这些修改的文件都是初始化之后,按照以上步骤安装,生成在根目录的。

 

vue脚手架导入mui.js的问题_第1张图片

你可能感兴趣的:(前端)