今天就跟大家聊聊有关在Vue2.0中对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进行配置时需要注意哪些问题有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。