详解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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
React Navigation 使用中遇到的问题小结
May 08 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
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
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php批量修改表结构实例
2017/05/24 PHP
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
js格式化时间的方法
2015/12/18 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python 链接和操作 memcache方法
2017/03/04 Python
python3之微信文章爬虫实例讲解
2017/07/12 Python
python生成特定分布数的实例
2019/12/05 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python的历史与优缺点整理
2020/05/26 Python
python 下划线的不同用法
2020/10/24 Python
python简单实现插入排序实例代码
2020/12/16 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
活动总结报告格式
2014/05/09 职场文书
大四毕业生自荐书
2014/07/05 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
四风自我剖析材料
2014/09/30 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
Vue的生命周期一起来看看
2022/02/24 Vue.js