脚本宝典收集整理的这篇文章主要介绍了Vue2.0配置mint-ui踩过的那些坑,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑。。
Vue.js 是一个用于创建 web 交互界面的。其特点是
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的环境
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配置mint-ui踩过的那些坑所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。