Vue-CLI基本使用 / elementUI / MintUI

作者: Angel_6c4e | 来源:发表于2020-08-06 16:51 被阅读0次

一.Vue-CLI基本使用

什么是Vue-CLI (Command Line Interface)?
Vue -CLI是vue官方提供的脚手架工具，默认已经帮我们搭建好了一套利用webpack管理vue的项目结构
如何安装Vue -cli和使用Vue -CLI?
安装脚手架工具: npm install -g @vue/cli
检查是否安装成功: vue --version
通过脚手架创建项目: vue create project-name
通过Vue -CLI生成的项目结构
在Vue -CLI2.x中生成的项目结构中我们能够看到build文件夹和config文件夹这两个文件夹中存储了webpack相关的配置，我们可以针对项目需求修改webpack配置
在Vue -CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简，让开发者不用关心webpack,只用关心如何使用Vue
node_ modules文件夹:存储了依赖的相关的包
public文件夹: 一般用于存储一些永远不会改变的静态资源或者webpack不支持的第三方库。任何放置在public 文件夹的静态资源都会被简单的复制，而不经过webpack。开发者需要通过绝对路径来引用它们。
src文件夹:代码文件夹
|---assets文件夹:存储项目中自己的一些静态文件(图片/字体等)
|---components文件夹:存储项目中的自定义组件(小组件，公共组件)
|---views文件夹:存储项目中的自定义组件(大组件，页面级组件，路由级别组件)
|---router文件夹:存储VueRouter相关文件 (配置路由)
|---store文件夹: 存储Vuex相关文件
|---App.vue文件:根组件
|---main.js文件:Vue的入口js文件
修改webpack的配置
Vue-CLI为了方便起见对webpack原有的属性进行了一层封装，如果我们需要修改webpack的配置，那么我们可以在项目中新建一个 vue.config.js的文件，在此文件中使用Vue-CLI封装的configureWebpack属性来修改webpack的配置。

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

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

什么是elementUI?
ElementUI是饿了么前端团队推出的一款基于Vue.js 的桌面端UI框架
和Bootstrap一样对原生的HTML标签进行了封装, 让我们能够专注于业务逻辑而不是UI界面
如何安装elementUI？
npm安装：npm i element-ui -S
完整引入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)
});

按需引入ElementUI

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

什么是mintUI?
mintUI是饿了么前端团队推出的一款基于Vue.js 的移动端UI框架
如何安装mintUI？
npm安装：npm install mint-ui -S
完整引入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)
})

按需引入mintUI

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

什么是Vant?
Vant是有赞前端团队推出的一款基于Vue.js 的移动端UI框架,适合做电商
如何安装Vant？
npm安装： npm install -g @vue/cli
推荐按需引入

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

Vue.use()做了什么事情?
Vue.use的作用是注册一个Vue插件(注册组件)。
除了利用component/components注册组件以外，还可以通过vue.use(XXX)来注册组件，但前提是XXX必须是是一个封装好的插件并且Vue.use(XXX)必须在new Vue()之前使用。
什么时候需要定义插件?
当某一个组件或者功能经常需要被使用到时，我们就可以将这个组件或者功能定义成一个插件
如何封装一个插件？

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>

为何要将组件封装成插件？将组件封装成插件的好处？

为组件扩展全局方法或者 property。如：vue-custom-element
为组件扩展全局资源：指令/过滤器/过渡等。如 vue-touch
为组件通过全局混入来添加一些组件选项。如 vue-router
为组件扩展 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

Vue-CLI基本使用 / elementUI / MintUI

一.Vue-CLI基本使用

二.elementUI

三.MintUI

四.Vant

五.Plugin

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端开发那些事儿