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


Posted in Javascript onApril 23, 2018

最近开发项目的时候逐渐采用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

然后就啪啪啪各种报错

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

解决错误

首先你需要在本地项目中安装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

终于可以了,就此,环境配置完成。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现div的切换特效上一个下一个
Feb 11 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
简单介绍JavaScript数据类型之隐式类型转换
Dec 28 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 #Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 #Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 #Javascript
Node.js应用设置安全的沙箱环境
Apr 23 #Javascript
vue-devtools的安装步骤
Apr 23 #Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 #Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 #Javascript
You might like
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
php 字符串中是否包含指定字符串的多种方法
2018/04/12 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python中的函数用法入门教程
2014/09/02 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
python实现mean-shift聚类算法
2020/06/10 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
linux面试题参考答案(4)
2014/09/21 面试题
事业单位辞职信范文
2014/01/19 职场文书
绿色环保口号
2014/06/12 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
热血教师观后感
2015/06/10 职场文书