小世界 主页归档标签
Vue和Element-UI的基本使用

Vue和Element-UI的基本使用

现在的前端项目都是使用vue去写的，因为vue构成的前端项目可和后端实现完全的解耦。虽然本人并非专攻于前端，但还是需要去了解他们的基本使用的。

在学习vue之前，还需要了解几个步骤，这些步骤可能有点繁杂。

Node.JS

首先你必须要安装Nodejs，我在此先介绍一下什么是nodejs：

概念

Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台 JavaScript 运行环境。Node.js 由 Node.js Foundation持有和维护，亦为 Linux 基金会的项目。

Node.js采用Google开发的V8运行代码，使用事件驱动、非阻塞和异步输入输出模型等技术来提高性能，可优化应用程序的传输量和规模。这些技术通常用于数据密集的即时应用程序。

Node.js大部分基本模块都用JavaScript语言编写。在Node.js出现之前，JavaScript通常作为客户端程序设计语言使用，以JavaScript写出的程序常在用户的浏览器上运行。Node.js的出现使JavaScript也能用于服务端编程。Node.js含有一系列内置模块，使得程序可以脱离Apache HTTP Server或IIS，作为独立服务器运行。

但我们并不注重于Nodejs本身，安装Node之后，会自动安装npm。这个npm才是我们最经常使用的工具。

npm

npm是Node.js默认的、用JavaScript编写的软件包管理系统，需要安装Node.js才能使用npm。

npm会随着Node.js自动安装。npm模块仓库提供了一个名为“registry”的查询服务，用户可通过本地的npm命令下载并安装指定模块。此外用户也可以通过npm把自己设计的模块分发到registry上面。

之后运行：

1
npm -v

查看的到npm版本，就代表安装成功了。

但是这里之所以提一下，是因为国外的镜像源速度都很慢，所以可以去：

1
D:\nodejs\node_modules\npm\lib\config\defaults.js

更改你的镜像源，增加速度。

Vue

要安装vue，还需要先安装webpack

webpack

Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。[1]

Webpack可以从终端、或是更改 webpack.config.js 来设置各项功能。

使用命令：

1
npm install webpack -g

全局安装webpack。

安装vue

然后再使用命令：

1
npm install vue-cli -g

全局安装vue框架，概念之后再提。

安装yarn

Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码， 或者分享自己的代码。

代码通过 包（package） (或者称为 模块（module）) 的方式来共享。 一个包里包含所有需要共享的代码，以及描述包信息的文件，称为 package.json 。

通过命令：

1
npm i yarn -g -verbose

安装yarn，之后再使用：

1
yarn config set XXXXX

设置你的快速镜像源。

之后，就可以使用 vue -v，查看vue版本，表示成功。

Vue概念

vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

组件

组件是Vue最为强大的特性之一。为了更好地管理一个大型的应用程序，往往需要将应用切割为小而独立、具有复用性的组件。在Vue中，组件是基础HTML元素的拓展，可方便地自定义其数据与行为。下方的代码是Vue组件的一个示例，渲染为一个能计算鼠标点击次数的按钮。

1
2
3
4
5
6
7
8
9
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
}

模板

Vue使用基于HTML的模板语法，允许开发者将DOM元素与底层Vue实例中的数据相绑定。所有Vue的模板都是合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应式系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。[12]

此外，Vue允许开发者直接使用JSX语言作为组件的渲染函数，以代替模板语法。 以下为可计算点击次数的按钮的JSX渲染版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Vue.component('buttonclicked', {
  props: ["initial_count"],
  data: function() {var q = {"count": 0}; return q;} ,
  render: function (createElement) {
    return createElement(
      'button',
      {
        on: {
          click: this.onclick
        }
      },
      'Clicked ' + this.count + ' times'
      )
    },
    methods: {
      "onclick": function() {
        this.count = this.count + 1;
      }
    },
    mounted: function() {
      this.count = this.initial_count;
    }
  );

响应式设计

响应式是指MVC模型中的视图随着模型变化而变化。在Vue中，开发者只需将视图与对应的模型进行绑定，Vue便能自动观测模型的变动，并重绘视图。这一特性使得Vue的状态管理变得相当简单直观。

过渡效果

Vue在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。 包括以下工具:

  • 在CSS过渡和动画中自动应用class
  • 可以配合使用第三方CSS动画库，如Animate.css
  • 在过渡钩子函数中使用JavaScript直接操作DOM
  • 可以配合使用第三方JavaScript动画库，如Velocity.js

单文件组件

为了更好地适应复杂的项目，Vue支持以.vue为扩展名的文件来定义一个完整组件，用以替代使用Vue.component注册组件的方式。开发者可以使用 Webpack或Browserify等构建工具来打包单文件组件。

创建vue项目

在你存放信息的文件夹内，使用命令：

1
2
npm install webpack
vue init webpack xxx

注意，最好先使用第一个命令，我看网上很多都是直接使用第二个命令的，虽然直接搭建vue项目这个命令没有错，但是你会发现下载速度非常的慢，所以建议使用我的方法来。

然后继续：

1
2
cd xxx
yarn install

安装包的依赖，在使用：

1
npm run dev

就可以在localhost：8888查看vue项目了。

vue结合Element-UI

Element-UI是国内的一套开源项目，可以非常快捷的开发项目。

添加依赖

我们在项目内，使用命令：

1
yarn add element-ui

安装框架，之后打开项目，你可以使用vscode去打开，也可以使用webstorm去打开。在main.js改为如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

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

增加ElementUI的使用。

使用Element-ui

我们打开helloworld.vue，加入一个element按钮：

1
<el-button type="primary">主要按钮</el-button>

再重启vue项目查看，就有一个vue按钮了

页面路由

添加页面

新建一个vue项目：Login.vue

1
2
3
4
5
6
7
8
9
10
11
<template>
  <div class="page" >
      <h2>Login Page</h2>
</template>

<script>
export default {
    name: 'Login'

}
</script>
配置路由

打开index.js，添加三个路由。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login'
import Home from '@/views/Home'
import NotFound from '@/views/404'


Vue.use(Router)

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/login',
      name: 'Login',
      component: Login
    }, {
      path: '/404',
      name: 'notFound',
      component: NotFound
    }
  ]
})

再打开localhost：8080，就可以在URL尝试访问这三个页面。

安装SCSS

Sass是一个将脚本解析成CSS的脚本语言，即SassScript。Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。

使用命令：

1
2
3
4
#第一步
yarn add css-loader style-loader sass-loader -D
yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
yarn add node-sass -D

然后在：\build\webpack.base.conf.js 中，写入：

1
2
3
4
  {
    test: /\.scss$/,   
    loaders: ['style', 'css', 'sass'   
}

就可以在style标签上更改了，比如404：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<template>
  <div class="site-wrapper site-page--not-found">
    <div class="site-content__wrapper">
      <div class="site-content">
        <h2 class="not-found-title">404</h2>
        <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
        <el-button @click="$router.go(-1)">返回上一页</el-button>
        <el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">进入首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    // name: '404'

}
</script>

<style lang="scss">
.site-wrapper.site-page--not-found {
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    .site-content__wrapper {
      padding: 0;
      margin: 0;
      background-color: #fff;
    }
    .site-content {
      position: fixed;
      top: 15%;
      left: 50%;
      z-index: 2;
      padding: 30px;
      text-align: center;
      transform: translate(-50%, 0);
    }
    .not-found-title {
      margin: 20px 0 15px;
      font-size: 8em;
      font-weight: 500;
      color: rgb(55, 71, 79);
    }
    .not-found-desc {
      margin: 0 0 30px;
      font-size: 26px;
      text-transform: uppercase;
      color: rgb(118, 131, 143);
      > em {
        font-style: normal;
        color: #ee8145;
      }
    }
    .not-found-btn-gohome {
      margin-left: 30px;
    }
}
</style>

此刻可以重新运行一遍，来看看结果。

这里填一个坑，我运行的时候报错了，需要更改sass-loader的版本：

1
npm install sass-loader@7.3.1

最后，查看结果：

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。这和ajax非常的类似，我们来看看区别：

ajax和axios的区别

ajax

ajax：

1.本身是针对MVC的编程,不符合现在前端MVVM的浪潮
2.基于原生的XHR开发，XHR本身的架构不清晰。
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
4.不符合关注分离（Separation of Concerns）的原则
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。

axios

1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

安装与使用

执行命令:

1
yarn add axios

然后修改Home.vue:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
  <div class="page">
    <h2>Home Page</h2>
    <el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
  </div>
</template>


<script>
import axios from 'axios'
export default {
  name: 'Home',
  methods: {
    testAxios() {
      axios.get('http://localhost:8080').then(res => { alert(res.data) })
    }
  }
}
</script>

Mock.js

介绍

Mock.js是一个模拟数据生成器，帮助前端开发和原型与后端进度分离，减少一些单调，特别是在编写自动化测试时。

提供了以下模拟功能：

  1. 根据数据模板生成模拟数据

  2. 模拟 Ajax 请求，生成并返回模拟数据

为什么我们要用Mock.js?

  1. 开发时，后端还没完成数据输出，前端也能根据模拟的数据开发。
  2. 想要尽可能还原真实的数据。
  3. 图片,url格式数据难以模拟。

安装与使用

使用命令：

1
yarn add mockjs

然后，我们可以在src目录下新建一个mock目录，创建mock.js，在里面模拟两个接口，分别拦截用户和菜单的请求。

1
2
3
4
5
6
7
8
9
10
11
12
import Mock from 'mockjs'

Mock.mock('http://localhost:8080/user', {
    'name': '@name', // 随机生成姓名
    'name': '@email', // 随机生成邮箱
    'age|1-10': 5, // 年龄1-10之间
})
Mock.mock('http://localhost:8080/menu', {
    'id': '@increment', // id自增
    'name': 'menu', // 名称为menu
    'order|1-20': 5, // 排序1-20之间
})

返回到Home页面，添加两个按钮，修改页面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div class="page">
    <h2>Home Page</h2>
    <el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
    <el-button type="primary" @click="getUser()">获取用户信息</el-button>
    <el-button type="primary" @click="getMenu()">获取菜单信息</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import mock from '@/mock/mock.js'
export default {
  name: 'Home',
  methods: {
    testAxios() {
      axios.get('http://localhost:8080').then(res => { alert(res.data) })
    },
    getUser() {
      axios.get('http://localhost:8080/user').then(res => { alert(JSON.stringify(res.data)) })
    },
    getMenu() {
      axios.get('http://localhost:8080/menu').then(res => { alert(JSON.stringify(res.data)) })
    }
  }
}
</script>

在测试一下，获取用户信息，便可以看到结果了。

前端VueElement-UISCSSaxiosMock.js