详解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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
JavaScript 拾漏补遗
Dec 27 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
谈谈JavaScript数组常用方法总结
Jan 24 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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的PSR规范中文版
2013/09/28 PHP
php生成扇形比例图实例
2013/11/06 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
PHP微信支付开发实例
2016/06/22 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
浅析Python requests 模块
2020/10/09 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
爱心倡议书范文
2014/05/12 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
医药公司开票员岗位职责
2015/04/15 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js