Vue2.0配置mint-ui踩过的那些坑

最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈，可是昨天开始配置开发环境的时候，遇到了各类报错，即便是按照两家的官方文档配置，也仍是会报错，晚上下班后回去配置了一夜，才终于把它配置好，因此就记录下来，以防后面再次踩坑。。

vue.js介绍

Vue.js 是一个用于建立 web 交互界面的。其特色是

1. 简洁 HTML 模板 + JSON 数据，再建立一个 Vue 实例，就这么简单。
2. 数据驱动 自动追踪依赖的模板表达式和计算属性。
3. 组件化 用解耦、可复用的组件来构造界面。
4. 轻量 ~24kb min+gzip，无依赖。
5. 快速 精确有效的异步批量 DOM 更新。
6. 模块友好 经过 NPM 或 Bower 安装，无缝融入你的工做流。

vue.js中文官网

mint-ui介绍

Mint UI是饿了么前端团队开源的基于 Vue.js 的移动端组件库 特色是：

1. Mint UI 包含丰富的 CSS 和 JS 组件，可以知足平常的移动端开发须要。经过它，能够快速构建出风格统一的页面，提高开发效率。
2. 真正意义上的按需加载组件。能够只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
3. 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各类动效，避免浏览器进行没必要要的重绘和重排，从而使用户得到流畅顺滑的体验。
4. 依托 Vue.js 高效的组件化方案，Mint UI 作到了轻量化。即便所有引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

Mint UI中文官网

建立Vue.js项目

首先根据vue官网给出的方法在本地建立一个vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 建立一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
复制代码

配置Mint UI 环境

接着根据Mint UI的官网在项目中引入Mint UI的环境

npm i mint-ui -S
复制代码

而后在项目中的main.js文件引入全部组件

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

复制代码

好了根据官网所说的，以上代码便完成了 Mint UI 的引入。

运行项目

最后根据官网的内容在APP.vue里面写一个button组件看看

<template>
  <div id="app">
  <mt-button @click.native="handleClick">按钮</mt-button>
</div>
</template>

<script>
export default{
  el: '#app',
  methods: {
    handleClick: function() {
      this.$toast('Hello world!');
    }
  }
}
</script>

<style>
</style>

复制代码

好了，环境搭建完成，咱们来运行项目吧

npm run dev
复制代码

而后就啪啪啪各类报错

解决错误

首先你须要在本地项目中安装CSS解释器

npm i css-loader style-loader -D

而后在build文件夹下面的webpack.base.conf.js文件里面配置以下代码

{
        test: /\.css$/,
        include: [
          /src/,
          '/node_modules/mint-ui/lib/'   
        ],
        use:[
          {loader:"style-loader"},
          {loader:"css-loader"},
        ]
        
      }
复制代码

若是你报es2015之类的错误，则须要将.babelrc文件修改成：

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "mint-ui",
      "style": true
    }
  ]]]
}
复制代码

最后运行

环境配置好后，咱们最后再运行一下。

npm run dev

终于能够了，就此，环境配置完成。