Vue2.0配置mint-ui踩过的那些坑
Vue2.0配置mint-ui踩过的那些坑
最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑。。
vue.js介绍
Vue.js 是一个用于创建 web 交互界面的。其特点是
- 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
- 数据驱动 自动追踪依赖的模板表达式和计算属性。
- 组件化 用解耦、可复用的组件来构造界面。
- 轻量 ~24kb min+gzip,无依赖。
- 快速 精确有效的异步批量 DOM 更新。
- 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。
vue.js中文官网
mint-ui介绍
Mint UI是饿了么前端团队开源的基于 Vue.js 的移动端组件库
特点是:
- Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
- 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
- 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
- 依托 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
然后就啪啪啪各种报错
解决错误
首先你需要在本地项目中安装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踩过的那些坑相关推荐
- vue2.0 配置 选项 属性 方法 事件 ——速查
全局配置 silent 设置日志与警告 optionMergeStrategies 合并策略 devtools 配置是否允许vue-devtools errorHandler 错误追踪 ...
- vue2.0的Element UI的表格table列时间戳格式化
表格属性 [html] view plain copy <el-table :data="tableData" v-loading.body="loading&qu ...
- vue2.0配置代理 api 开发环境、生产环境
业务场景:只需内网调用接口,不需要ngix,所以生产环境没有跨域问题不用api代理,但是本地环境有跨域问题要做代理. 实现需求:本地环境有api,生产环境没有api 以下是实现方法: 1. confi ...
- vue2.0基于element ui 上月 本月 下月
<div style="margin-bottom:15px ;float:right;"><el-button-group><el-button p ...
- seata1.3.0版本整合nacos踩过的深坑—not support register type: null (SpringBoot、Cloud、CloudAlibaba版本兼容使用)?
问题:在搭建分布式事务seata版本时报错,提示 NotSupportYetException: not support register type: null:从异常提示可以看出应该是版本兼容问题 ...
- Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
- vue 专题 vue2.0各大前端移动端ui框架组件展示
Vue 专题 一个数据驱动的组件,为现代化的 Web 界面而生.具有可扩展的数据绑定机制,原生对象即模型,简洁明了的 API 组件化 UI 构建 多个轻量库搭配使用 请访问链接: https://ww ...
- [vue] 怎么配置使vue2.0+支持TypeScript写法?
[vue] 怎么配置使vue2.0+支持TypeScript写法? 配置ts-loader,tsconfig增加类型扩展,让ts识别vue文件vue文件中script里面换成ts写法, 需要增加几个t ...
- 【Vue2.0】—Vue脚手架配置代理(二十二)
[Vue2.0]-Vue脚手架配置代理(二十二) 方法一 方法二
最新文章
- java核心标签库,16.JSTL标签库(我的JavaEE笔记)
- Array Splitting CodeForces - 1197C
- BluePrint和ORM
- golang常用手册:数据类型、变量和常量
- 自动生成数学题型二(框架struts2)题型如((a+b)*c=d)
- 8 天扩容超 100 万核,腾讯会议正在刷新历史
- 谈谈自我介绍与第一印象
- vue input 只允许输入整数、整数和小数(保留小数点后两位)
- Android 快速集成文档校正能力 超简单
- iOS系统自带指纹验证的使用
- 忆阻器类脑芯片与人工智能
- 你不能做宅男,因为你穷
- matlab画中国地图深浅,matlab绘制中国地图
- 百度语音集成离线功能
- codeforces 821 B Okabe and Banana Trees
- Python GraphQL
- 完善人格的好办法 [转]
- 标 题: 慕尼黑:关于跑步的记忆 zz
- ubuntu的bash参考手册
- [每天读一点英文:那些给我勇气的句子] alone but not lonely
热门文章
- 查单个值用什么resultset_视光门诊日记—为什么两个医院查的视力不一样
- php调用selenium,从php调用python selenium
- k2677场效应管参数引脚_场效应管参数大全2.doc
- event 和 window.event
- Springboot 打包时引入外部jar
- 1x pcie 速度_在主板规格上,x8在“1 x PCIe 3.0 x16(x8带宽)”中的含义是什么?...
- HTML 杨辉三角,杨辉三角 - 哼哼哈嘿 - OSCHINA - 中文开源技术交流社区
- 利用Python绘制 3D 体素色温图
- 2021年春季学期-信号与系统-第六次作业参考答案-第十一小题
- linux 检测添加磁盘空间,Linux构造磁盘空间满的测试环境