vue+element学习记录

一、Vue介绍

作者：尤雨溪

官网：https://cn.vuejs.org/

       Vue的作者来自中国，叫尤雨溪，大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来
    读了美术设计和技术的硕士，正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，
    开启了自己的前端生涯。 于2014年2月，开发了一个前端开发库Vue.js。（引用自百度百科）

• 问题1：什么是Vue:

  Vue是一个用于构建用户界面的渐进式框架(自由组合，灵活复用)，vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（vue-router：跳转，axios：通信，vuex：状态管理）整合。

• 问题2：相比其它框架有什么优势：

  https://cn.vuejs.org/v2/guide/comparison.html

  Angular：Google收购的前端框架，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念

  React：Facebook出品，一款高性能的JS前端框架;特点是提出了新概念[虚拟DOM]用于
  减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率

  Vue：综合了Angular (模块化)和React (虚拟DOM)的优点，且易用、灵活、高效

• 问题3：Vue的核心特点：

  • 响应式的数据绑定

  • 可组合的视图组件

  • 虚拟DOM

  • MVVM模式

    MVVM 是一种设计思想
    DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
    从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
    

二、Element介绍

vue2.0——https://element.eleme.io/#/zh-CN

vue3.0——https://element-plus.gitee.io/zh-CN/

网站快速成型工具，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

三、开发环境

brew、node.js、npm、vue-cli 相关概念；

• brew：是一个软件包管理工具,类似于centos下的yum或者ubuntu下的apt-get,非常方便,免去了自己手动编译安装的不便
• node.js：运行在服务端的 JavaScript
• npm：是随同node.js一起安装的包管理工具，是 JavaScript 世界的包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系（新版的nodejs已经集成了npm）
• vue-cli：官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架,我们的开发更加的快速;

1、安装 Node.js

安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

官网下载： http://nodejs.cn/download/

brew下载：brew install -g node

设置淘宝镜像加速器

npm install cnpm -g
npm install --registry=https://registry.npm.taobao.org
当后面npm安装失败时，可以使用cnpm替换试试

2、安装VUE-CLI

vue-cli：

在命令台输入， -g表示全局安装

💡 npm install vue-cli -g

查看是否安装成功

💡 vue list

3、创建一个vue工程

通过vue-cli脚手架创建工程：

vue init webpack vue_test

运行项目：

4、工程结构

5、编辑器环境准备

推荐：vsCode、webStorm、idea（推荐程度按顺序递减）

idea：安装vue.js插件（正版需要破解，社区版搜不到插件）https://blog.csdn.net/m0_47333020/article/details/108182429

webStorm：不需要安装插件（正版需要破解）

vsCode：安装相应的插件（比较方便）https://blog.csdn.net/yujing1314/article/details/90340647

四、基于Vue实现增删改查

效果图

1、安装路由、element-ui、axios通信工具

npm install vue-router

npm i element-ui -S

npm install axios

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FVRRZpXg-1640781611641)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f0f72c1b-7bf7-48fc-ba14-15481a80631e/Untitled.png)]

2、在main.js中导入组件：根目录——>main.js

import router from ‘./router’
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’

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/>'
})

配置代理(解决跨域问题)：根目录——>config——>index.js

proxyTable: {
   
  '/': {
   
		// 后端接口请求地址，用于本地执行访问
    target: 'http://114.116.255.239:8081',
    // secure: false,  // 如果是https接口，需要配置这个参数
    changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
    pathRewrite: {
   
      '^/': ''
    }
  }
}

万能请求工具封装：src——utils——api.js

import axios from 'axios';

//请求封装
let base = "";

//post请求封装，Key、Value形式
export const postKeyValueRequest=(url,params)=>{
   
  return axios({
   
    method: 'post',
    url: `${
    base}${
    url}`,
    data: params,
    transformRequest: [function (data) {
   
      let ret = '';
      for(let i in data) {
   
        ret += encodeURIComponent(i)+'='+encodeURIComponent(data[i])+'&';
      }
      console.log(ret);
      return ret;
    }],
    headers: {
   
      'Content-Type':'application/x-www-form-urlencoded'
    }
  })
};

//post请求封装，json形式
export const postRequest = (url, params) => {
   
  return axios({
   
    method: 'post',
    url: `${
    base}${
    url}`,
    data: params
  })
}

//put请求封装
export const putRequest = (url, params) => {
   
  return axios({
   
    method: 'put',
    url: `${
    base}${
    url}`,
    data: params
  })
}

//get请求封装
export const getRequest = (url, params) => {
   
  return axios({
   
    method: 'get',
    url: `${
    base}${
    url}`,
    params: params
  })
}

//delete请求封装
export const deleteRequest = (url, params) => {
   
  return axios({
   
    method: 'delete',
    url: `${
    base}${
    url}`,
    params: params
  })
}

路由配置(页面访问与跳转)：src——router——index.js

import Vue from 'vue'
import Router from 'vue-router'

import {
   postRequest} from "../utils/api";
import {
   getRequest} from "../utils/api";
import {
   postKeyValueRequest} from "../utils/api";
import {
   putRequest} from "../utils/api";
import {
   deleteRequest} from "../utils/api";

import Emp from "../views/Emp"

//设置为vue的全局变量，方便在组件中引用
Vue.prototype.postRequest = postRequest;
Vue.prototype.getRequest = getRequest;
Vue.prototype.postKeyValueRequest = postKeyValueRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.use(Router)
Vue.config.productionTip = false;

//定义路由规则
export default new Router({
   
  routes: [
    {
   
      path: '/',
      name: '职工列表',
      component: Emp,
      hidden : true
    }
  ]
})

Emp.vue内容：