详解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 相关文章推荐
用于节点操作的API,颠覆原生操作HTML DOM节点的API
Dec 11 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
详解javascript高级定时器
Dec 31 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
微信小程序实现弹出菜单
Jul 19 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
Angular Material Icon使用详解
Nov 07 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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 文件上传系统手记
2009/10/26 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
jquery实现点击消失的代码
2014/03/03 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Python 装饰器深入理解
2017/03/16 Python
python实现推箱子游戏
2020/03/25 Python
Django框架安装方法图文详解
2019/11/04 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
个人评价范文分享
2014/01/11 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
邓小平理论心得体会
2014/09/09 职场文书
科技活动总结范文
2015/05/11 职场文书
教师节联欢会主持词
2015/07/04 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
DE1103使用报告
2022/04/05 无线电