详解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 相关文章推荐
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 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_decode不转义中文的方法
2017/05/20 PHP
PHP微商城开源代码实例
2019/03/27 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
玩转方法:call和apply
2014/05/08 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Python实现统计英文文章词频的方法分析
2019/01/28 Python
Python2与Python3的区别实例分析
2019/04/11 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
Python中常用的os操作汇总
2020/11/05 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
佳能加拿大网上商店:Canon eStore Canada
2018/04/04 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
大学生的自我鉴定范文
2014/01/21 职场文书
国培远程培训感言
2014/03/08 职场文书
护士个人自我鉴定
2014/03/24 职场文书
保护环境倡议书500字
2014/05/19 职场文书
社区工作者演讲稿
2014/05/23 职场文书
快递员岗位职责
2014/09/12 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers