Vue开发第二步：组件库的选择以及新建组件

基于vue的组件库

上篇我们安装了vue cli，基于vue的组件库有许多，我个人常用的有三种

iview

官网链接如下：https://www.iviewui.com.

针对vue cli而言，更加建议使用npm安装。cd到项目目录下，运行以下命令

$ npm install iview --save

安装过后我们需要引入iview组件库
可以选择全局引入，即所有组件样式都使用iview组件库的样式。一般在 webpack 入口页面 main.js 中如下配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from 'components/app.vue';
import Routers from './router.js';
import iView from 'iview';
import 'iview/dist/styles/iview.css';

Vue.use(VueRouter);
Vue.use(iView);

// The routing configuration
const RouterConfig = {
    routes: Routers
};
const router = new VueRouter(RouterConfig);

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

我们也可以选择部分引入/按需引入，即不必要所有的组件都使用iview中的组件，只选择iview其中几个组件进行使用。
借助插件 babel-plugin-import可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：

npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

然后这样按需引入组件，就可以减小体积了：

import { Button, Table } from 'iview';
Vue.component('Button', Button);
Vue.component('Table', Table);

依旧要在main.js或者跟组件处import iview组件库

import 'iview/dist/styles/iview.css';

Ant Design

官网链接如下：https://vue.ant.design/docs/vue/introduce/.
安装方式也与iview类似

element

官网链接如下： https://element.eleme.cn/#/zh-CN/component/quickstart.
安装方式也与iview类似

不同的组件库风格、特色、适应场合不尽相同，大家可以按需选择，不过如果选择全局安装方式，谨记，不要同时安装多个组件库！会给代码维护造成巨大困难，而且还会加大项目的体积。

新建组件

什么是组件呢？简单理解，就是页面或页面的一部分，包括其样式以及交互方法，vue组件跟其他主流框架一样，由三部分组成：html来规定组件的布局、设计等；css来为组件设置样式；ts来进行组件的交互
以以下代码所示可以更为直观看出来

<template>
  
</template>

<script>
     export default {
       name: "login",
       data () {
         return{
           pass1:'',//密码（注册）
           pass2:'',//重复密码（注册）
           phone:'',//注册账号
           phonenumbers:'',//登录账号
           passwords:''//登录密码
         }
       },
       methods:{

         login(){        
         }
     }
     }
</script>
<style scoped>
</style>

我们使用websotrm新建组件，右击新建.vue文件来新建一个组件，取名为login

新建后打开login.vue

<template>
    
</template>

<script>
    export default {
        name: "login"
    }
</script>

<style scoped>

</style>

首先我们需要引入该组件路由，所以打开index.js
可以在routes看见以下代码：

import HelloWorld from '@/components/HelloWorld'

//在route:[]中
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },

这也就给我们一个很好的例子：如何引入组件路由
首先将组件按照其目录，通过import引入到index.js中，然后在route里声明该组件的path、name（两者用于跳转），以此为模板我们来引入login.vue

import login from '@/components/login'

//在route:[]中
    {
      path:'/log',
      name:'login',
      component:login
    },

vue cli文件目录

下面我来说一下vue cli入门阶段需要熟悉的几个文件

/config/index.js

用来配置端口号、url、api等重要信息，日后我们会在项目打包、axios访问服务端接口的时候重点讲这个文件的配置

app.vue

所有组件的父组件，可以理解为，web的入口。比如我们在app.vue中使用iview的menu组件，app.vue代码如下

<template>
  <div id="app">
    <div class="layout">
      <layout>
        <i-header>
          <i-menu mode="horizontal" theme="dark" active-name="1">
            <div class="layout-logo"></div>
            <div class="layout-nav">
              <menu-item name="1">
                <router-link to="/">
                <h1>
                  <font color = #f0f8ff>
                    算法竞赛线上评测系统(ONLINE JUDGE)
                  </font>
                </h1>
                </router-link>
              </menu-item>
              <router-link to="/user/login">
              <menu-item name="2">
                  <icon type="ios-contact"></icon>
                  登录/注册
              </menu-item>
              </router-link>
              <menu-item name="3">
                <icon type="ios-keypad"></icon>
                F.A.Q
              </menu-item>
              <router-link to="/share">
              <menu-item name="4">
                <icon type="md-cloud-outline"></icon>
                分享交流
              </menu-item>
              </router-link>
              <router-link to="/search">
              <menu-item name="5">
                <icon type="md-search"></icon>
                题目搜索
              </menu-item>
              </router-link>

              <!--<router-link to="/user/message">-->
                <!--<menu-item name="6">-->
                  <!--<icon type="md-search"></icon>-->
                  <!--用户-->
                <!--</menu-item>-->
              <!--</router-link>-->
            </div>
          </i-menu>
        </i-header>
      </layout>
    </div>
    <router-view>
    </router-view>
  </div>
</template>
<script>
export default {
  name: 'App',

}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后我们运行命令

npm run dev

打开localhost:8080显示如下

还记得我们之前建的login.vue吗，我们没有在上面写任何代码，因为我们规定的path为/log，所以我们在浏览器上打开：localhost:8080/#/log，显示如下
依然显示了该menu

所以app.vue就相当于一个跟页面，通过

<router-view>
    </router-view>

链接路由index.js,将import的组件全部渲染并标记路由，所以我们可以成功打开localhost:8080/#/log。因为helloworld.vue路由path为’/’，所以app.vue渲染完毕后直接寻找到了helloworld.vue将其显示。假如我们把helloworld.vue停止引入，然后将login.vue的path设置为’/’，直接运行localhost:8080就是之前localhost:8080/#/log的页面了，很好理解。

/router/index.js

将组件引入并设置每个组件的路由，以便app.vue通过router-view进行渲染访问、通过routerlink等方式跳转、传参。

/main.js

用于引入工具库、依赖等。
如以下代码所示，我们分别引入了iview、axios等工具。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'iview/dist/styles/iview.css'
import iview from 'iview'
import axios from "axios";


Vue.use(iview);
Vue.prototype.$axios = axios;
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

小结

1.vue有不少组件库，可全局安装也可以按需安装。建议使用全局安装的时候不要引入多个组件库
2.首先熟悉vue cli的文件目录，尤其是index.js、main.js、app.vue等入门开发需要的文件。
（1）index.js设置路由
（2）app.vue用来导向浏览器渲染加载路由组件
（3）main.js用来引入工具、库
3.建议按照要求在components文件夹中新建login.vue文件，按照要求设置路由。以后会通过登陆注册功能的页面编写，来简述vue开发入门。