前端开发那些事儿

Vue-CLI基本使用 / elementUI / MintUI

2020-08-06  本文已影响0人  Angel_6c4e

一.Vue-CLI基本使用

例如：想要修改输出目录名称
原来修改输出目录名称的方式：

const path = require('path')

module.exports = {
   output: {
     path: path.resolve(__dirname, 'bundle')
 }
}

利用Vue-CLI创建项目后，修改输出目录名称的方式：

const webpack = require('webpack')

// vue.config.js
module.exports = {
  /* 修改打包以后的目录名称 */
  outputDir: 'bundle',
  /* 如果不可以满足我们的需求，那么我们可以通过configureWebpack的属性来编写原生的webpack配置 */
  configureWebpack: {
    /* 就可以在这个对象中编写原生的webpack配置 */
    /* 在webpack中添加插件需要写在plugins中 */
    plugins: [
      /* 之后每一个打包好的文件中都会有 ‘勿忘@注’的注释开头 */
      new webpack.BannerPlugin({
        banner: '勿忘@注'
      })
    ]
  }

}

二.elementUI

在main.js文件中写入:

import Vue from 'vue';
import App from './App.vue';
// 1.导入elementUI和elementUI的css文件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 2.告诉Vue，我们在项目中需要用的elementUI
Vue.use(ElementUI);

new Vue({
 el: '#app',
 render: h => h(App)
});

1.借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：npm install babel-plugin-component -D

2.修改 .babelrc的配置文件

module.exports = {
 "presets": [
     ["@vue/cli-plugin-babel/preset", { "modules": false }]
  ],
 "plugins": [
   [
     "component",
     {
       "libraryName": "element-ui",
       "styleLibraryName": "theme-chalk"
     }
   ]
 ]
}

3.在main.js文件中写入:

import Vue from 'vue';
import App from './App.vue';
//1.如果你只希望引入部分组件，比如 Button 和 Switch,就只需要导入这两个组件
import { Button, Switch } from 'element-ui'
// 注意点：在elementUI中按需引入可以不用导入css文件
// import 'element-ui/lib/theme-chalk/index.css'

// 2.告诉Vue，我们在项目中需要用的elementUI
Vue.use(ElementUI);

new Vue({
 el: '#app',
 render: h => h(App)
});

三.MintUI

在main.js文件中写入:

import Vue from 'vue'
import App from './App'
// 1.导入mintUI和mintUI的css文件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

// 2.告诉Vue，我们在项目中需要用的mintUI
// component注册全局组件
Vue.component(Button.name, Button)
Vue.component(Tabbar.name, Tabbar)
Vue.component(TabItem.name, TabItem)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 render: c => c(App)
})

1.借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。首先，安装 babel-plugin-component：npm install babel-plugin-component -D

2.修改 .babelrc 文件中的配置

module.exports = {
 presets: [
   ['@vue/cli-plugin-babel/preset', { 'modules': false }]
 ],
 plugins: [['component',
   {
     'libraryName': 'mint-ui',
     'style': true
   }
 ]]
}

3.在main.js文件中写入:

import Vue from 'vue'
import App from './App'
// 1.如果你只希望引入部分组件，比如 Button, Tabbar和TabItem ,就只需要导入这三个组件
import { Button, Tabbar, TabItem } from 'mint-ui'
// 注意点：在MintUI中哪怕是按需引入也必须导入css文件
import 'mint-ui/lib/style.css'

// 2.告诉Vue，我们在项目中需要用的mintUI
// component注册全局组件
Vue.component(Button.name, Button)
Vue.component(Tabbar.name, Tabbar)
Vue.component(TabItem.name, TabItem)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 render: c => c(App)
})

四.Vant

1.babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。首先，安装babel-plugin-import：npm i babel-plugin-import -D

2.在babel.config.js 文件中配置

module.exports = {
 presets: [
   ['@vue/cli-plugin-babel/preset', { 'modules': false }]
 ],
 plugins: [
   ['import', {
     libraryName: 'vant',
     libraryDirectory: 'es',
     style: true
   }, 'vant']
 ]
}

3.在main.js文件中写入

import Vue from 'vue'
import App from './App'
// 1.如果你只希望引入部分组件，比如NavBar, Card, GoodsAction, GoodsActionIcon, GoodsActionButton  ,就只需要导入这些个组件
import { NavBar, Card, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
//2.导入vant的css文件
import 'vant/lib/index.css'
// 3.告诉Vue，我们在项目中需要用的Vant
Vue.use(NavBar)
Vue.use(Card)
Vue.use(GoodsAction)
Vue.use(GoodsActionIcon)
Vue.use(GoodsActionButton)

/* eslint-disable no-new */
new Vue({
 el: '#app',
 render: c => c(App)
})

五.Plugin

1.在 main.js文件中通过use()来创建组件(前提是写在use()中的组件必须是以一个封装好的插件)

import Vue from 'vue'
import App from './App.vue'
import store from './store'

// 4.这里使用use来创建组件，只需要引入plugin目录下的index.js文件即可
import Loading from './plugin/loading/index.js'
// 方式三：通过use来创建组件，前提是写在use中的组件必须是以一个封装好的插件
Vue.use(Loading)

Vue.config.productionTip = false

new Vue({
 store,
 render: h => h(App)
}).$mount('#app')

2.在src目录下创建plugin目录，并且在plugin目录创建新的目录,命名为loading (因为我这里创建的组件是网络加载指示器，所以组件名称是Loading，组件所在文件就命名为Loading.vue),在Loading目录下粘贴components目录下的Loading.vue文件，在创建一个新的index.js文件(这里的一个文件就代表了一个组件)

3.在plugin目录下的index.js文中编写一下代码，就完成了把组件包装成插件的工作

import Vue from 'vue'
// 导入封装好的组件
import Loading from './Loading'

export default {
// 注意点：如果要将一个组件封装成一个插件，就必须用到install方法，并且在install方法中注册当前的组件
// 原理：只要调用use方法，use方法就会去调用插件的install方法，在install方法中册当前的组件，也就完成了把组件包装成插件的工作
 install: function () {
// 注册全局组件
  Vue.component(Loading.name, Loading)
   
}

4.附加：在plugin目录下Loading.vue文件中的网络加载指示器 代码

<template>
  <div class="container">
      <div class="loading"></div>
      <p class="title">正在加载...</p>
  </div>
</template>

<script>
export default {
 name: 'Loading'
 }
}
</script>

<style scoped lang="scss">
 .container{
     width: 200px;
     height: 200px;
     border-radius: 20px;
     background: rgba(0,0,0,0.5);
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     .loading{
         width: 100px;
         height: 100px;
         border-radius: 50%;
         border: 5px solid #FFFFFF;
         margin: 20px auto;
         border-right-color: #3a8ee6;
         animation: loading 2s linear infinite;
     }
     .title{
         text-align: center;
         font-size: 16px;
         color: #fff;
     }
 }
   @keyframes loading {
        from{
            transform: rotate(0deg);
        }
       to{
          transform: rotate(360deg);
       }
   }
</style>

  1. 为组件扩展全局方法或者 property。如：vue-custom-element

  2. 为组件扩展全局资源：指令/过滤器/过渡等。如 vue-touch

  3. 为组件通过全局混入来添加一些组件选项。如 vue-router

  4. 为组件扩展 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

  5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

上一篇 下一篇

猜你喜欢

热点阅读