当前位置:Gxlcms > JavaScript > 从零开始Vue2.0配置mint-ui(附代码)

从零开始Vue2.0配置mint-ui(附代码)

时间:2021-07-01 10:21:17 帮助过:5人阅读

这次给大家带来从零开始Vue2.0配置mint-ui(附代码),从零开始Vue2.0配置mint-ui的注意事项有哪些,下面就是实战案例,一起来看一下。

最近开发项目的时候逐渐采用vue.js+mint-ui的技术栈,但是昨天开始配置开发环境的时候,遇到了各种报错,即使是按照两家的官方文档配置,也还是会报错,晚上下班后回去配置了一晚上,才终于把它配置好,所以就记录下来,以防后面再次踩坑。。

vue.js介绍

Vue.js 是一个用于创建 web 交互界面的。其特点是

  1. 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。

  2. 数据驱动 自动追踪依赖的模板表达式和计算属性。

  3. 组件化 用解耦、可复用的组件来构造界面。

  4. 轻量 ~24kb min+gzip,无依赖。

  5. 快速 精确有效的异步批量 DOM 更新。

  6. 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

vue.js中文官网

mint-ui介绍

Mint UI是饿了么前端团队开源的基于 Vue.js 的移动端组件库

特点是:

  1. Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。

  2. 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。

  3. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。

  4. 依托 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>
 <p id="app">
 <mt-button @click.native="handleClick">按钮</mt-button>
</p>
</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

终于可以了,就此,环境配置完成。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

vue router动态路由操作子路由

怎样使用vue+webpack做出异步加载

以上就是从零开始Vue2.0配置mint-ui(附代码)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行