时间:2021-05-25
最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑。。
vue.js介绍
Vue.js 是一个用于创建 web 交互界面的。其特点是
vue.js中文官网
mint-ui介绍
Mint UI是饿了么前端团队开源的基于 Vue.js 的移动端组件库
特点是:
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
终于可以了,就此,环境配置完成。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下1.安装vue2.0的mint-ui框架npminstallmint-ui-save2.
在vue2.0中引入了mint-ui后总是报一个css的错误但是package.json中已经配置了css-loaderstyle-loader,webpack
vue中mint-ui环境搭建详细介绍首先需要如下配置node(最好用淘宝源)$npminstall-gcnpm--registry=https://regis
Import按需引入:import{Checklist}from'mint-ui';Vue.component(Checklist.name,Checklist
近期上手vue的移动端项目,舍弃了之前自己相对熟悉的mui框架,改为用饿了么团队为了vue量身定做的mint-ui框架。之前开发的时候觉得mui的文档就足够坑爹