这次给大家带来如何使用vue2.0配置mint-ui，使用vue2.0配置mint-ui的注意事项有哪些，下面就是实战案例，一起来看一下。
最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈，但是昨天开始配置开发环境的时候，遇到了各种报错，即使是按照两家的官方文档配置，也还是会报错，晚上下班后回去配置了一晚上，才终于把它配置好，所以就记录下来，以防后面再次踩坑。。
vue.js介绍
vue.js 是一个用于创建 web 交互界面的。其特点是
简洁 html 模板 + json 数据，再创建一个 vue 实例，就这么简单。
数据驱动 自动追踪依赖的模板表达式和计算属性。
组件化 用解耦、可复用的组件来构造界面。
轻量 ~24kb min+gzip，无依赖。
快速 精确有效的异步批量 dom 更新。
模块友好 通过 npm 或 bower 安装，无缝融入你的工作流。
vue.js中文官网
mint-ui介绍
mint ui是饿了么前端团队开源的基于 vue.js 的移动端组件库
特点是：
mint ui 包含丰富的 css 和 js 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
考虑到移动端的性能门槛，mint ui 采用 css3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
依托 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>
<p id="app">
<mt-button @click.native="handleclick">按钮</mt-button>
</p>
</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
终于可以了，就此，环境配置完成。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样使用js获取dom 元素绝对位置
怎样进行vue.js登录控制
以上就是如何使用vue2.0配置mint-ui的详细内容。