How to configure mint-ui using Vue2.0

This time I will show you how to use Vue2.0 to configure mint-ui, and what are the precautions for using Vue2.0 to configure mint-ui. The following is a practical case, let's take a look.

configuring the development environment yesterday, I encountered various errors, even if I followed the two companies’ The official document configuration will still report errors. I went back to configure it after get off work all night before finally configuring it, so I recorded it to prevent it from happening again later. .

Introduction to vue.js

1. Concise HTML template JSON data, and then create a Vue instance, it's that simple.

2. Data-driven Automatically track dependent templates

   expressions and calculated properties.

3. Componentization uses decoupled and reusable components to construct the interface.

4. Lightweight ~24kb min gzip, no dependencies.

5. Fast, precise and effective asynchronous batch DOM updates.

6. Module Friendly Install via NPM or Bower and integrate seamlessly into your workflow.

mint-ui introduction

1. Mint UI contains rich CSS and JS components, which can meet daily mobile development needs. Through it, you can quickly build a page with a unified style and improve development efficiency.

2. True loading of components on demand. You can load only the declared components and their style files, without worrying about the file size being too large.

3. Taking into account the performance threshold of the mobile terminal, Mint UI uses CSS3 to handle various animations to avoid unnecessary redrawing and rearrangement of the browser, so that users can get a smooth experience. experience.

4. Relying on Vue.js’ efficient componentization solution, Mint UI is lightweight. Even if all are imported, the compressed file size is only ~30kb (JS CSS) gzip.

Create Vue.js project

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

Configure the Mint UI environment

npm i mint-ui -S

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
Vue.use(MintUI)

Run the project

<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

solve the errors

npm i css-loader style-loader -D

{
    test: /\.css$/,
    include: [
     /src/,
     '/node_modules/mint-ui/lib/'  
    ],
    use:[
     {loader:"style-loader"},
     {loader:"css-loader"},
    ]
    
   }

{
 "presets": [
  ["es2015", { "modules": false }]
 ],
 "plugins": [["component", [
  {
   "libraryName": "mint-ui",
   "style": true
  }
 ]]]
}

Finally run

npm run dev

How to use JS to obtain the absolute position of DOM elements

How to perform vue.js login control

The above is the detailed content of How to configure mint-ui using Vue2.0. For more information, please follow other related articles on the PHP Chinese website!