vue基础3：构建vue项目的基本能力

shawna
183 阅读2分钟

非专业前端，本文是结合自身只是进阶 给想了解前端技术栈，及刚刚入坑无法找到系统知识栈的一些参考，欢迎指正

构建vue项目的基本能力

对于中型的及新兴的互联网企业的运维团队来说，开发一些运维操作平台进程运维操作管理，是一个不错的选择，在运维操作平台的发展中，逐渐把前端后端分离，将前端独立成前端工程项目；

在当前的运维开发工作中当我们面临自主构建前端时，对于前端选择我们会经常讨论vue或是angular、react等；那么我们来谈一下vue是什么，以及要做一个vue项目需要的相关知识，如下：

JavaScript
ES6
Vue.js
Vue-cli
Vue-router
Vuex
axios
...

vue是什么

vue是什么，vue是Vue.js是一套JavaScript的框架。并不是一门独立的前端语言。vue构建的项目是一个单页面应用，我们此文中使用的版本为vue2.6.0

vue有什么：

MVVM数据双向绑定
模块化
分层

图中大致表示了vue的发展，我们在此不做概述；

可以参看vue的官方文档：

ES6和vue的关系

ES是ECMAScript的简写，ECMA是一个前端标准化组织，ECMA实现了JavaScript的标准；可以参看详解JavaScript与ECMAScript的区别

我们知道了vue是JavaScript的一个框架，那么实现vue的时候我们使用的JavaScript语法就是ES6，要构建vue的项目需要一定的JavaScript基础后熟悉ES6语法

ES6快速上手

假设已经熟悉JavaScript了，ES6快速上手还需了解一下内容

  • let和const
  • 箭头函数
  • 数组方法变更
  • 字符串方法变更
  • 解构赋值和三个点运算符
  • 函数方法
  • class的应用
  • 异步async和Promise的应用
  • model模块化

关于vue

vue-router

只做简单介绍

用一句话概括，vue-router是前端工程用于管理页面路由结构的库 Vue Router

常见的问题

axios跨域 CORS

在我们构建的vue项目请求后台API数据时，经常会出现 类似于下图的报错即跨域问题

1) 需要在vue.config.js中进行 vue-cli 配置

module.exports = {
devServer: {
	proxy:{ //标识符
      '/notify': {
        target: 'http://133.59.116.111:8333',
        changeOrigin: true,
        pathRewrite:{
          '^/notify': '' //将以/notify开头的URL去掉 /notify
        },
        '/game': {
          target: 'http://133.59.116.222:8334',
          changeOrigin: true,
          ws:true,
          pathRewrite:{
            '^/game': ''
          }
        }

      }
    }
}
}

2)调用时拼接标识符

axios.post('/notify'+ '/backend/url', data:{name: 'username'})
avatar
文章
阅读
粉丝