最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈，但是昨天开始配置开发环境的时候，遇到了各种报错，即使是按照两家的官方文档配置，也还是会报错，晚上下班后回去配置了一晚上，才终于把它配置好，所以就记录下来，以防后面再次踩坑。。
vue.js介绍
Vue.js 是一个用于创建 web 交互界面的。其特点是
- 简洁 HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
- 数据驱动 自动追踪依赖的模板表达式和计算属性。
- 组件化 用解耦、可复用的组件来构造界面。
- 轻量 ~24kb min+gzip，无依赖。
- 快速 精确有效的异步批量 DOM 更新。
- 模块友好 通过 NPM 或 Bower 安装，无缝融入你的工作流。
mint-ui介绍
Mint UI是饿了么前端团队开源的基于 Vue.js 的移动端组件库
特点是：
- Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
- 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件，无需再纠结文件体积过大。
- 考虑到移动端的性能门槛，Mint UI 采用 CSS3 处理各种动效，避免浏览器进行不必要的重绘和重排，从而使用户获得流畅顺滑的体验。
- 依托 Vue.js 高效的组件化方案，Mint UI 做到了轻量化。即使全部引入，压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。
创建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
终于可以了，就此，环境配置完成。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- mint-ui在vue中的使用示例
- vue基于mint-ui实现城市选择三级联动
- vue中mint-ui的使用方法
- Vue修改mint-ui默认样式的方法
- 在vue项目中安装使用Mint-UI的方法
- vue使用mint-ui实现下拉刷新和无限滚动的示例代码
- vue基于mint-ui的城市选择3级联动的示例
- 详解vue mint-ui源码解析之loadmore组件
- vue mint-ui学习笔记之picker的使用
- 基于VUE.JS的移动端框架Mint UI的使用
