Non-professional front-end, this article is combined with their own only advanced to understand the front-end technology stack, and just into the pit can not find some reference to the system knowledge stack, welcome correction

Basic ability to build VUE projects

For the operation and maintenance team of medium-sized and emerging Internet enterprises, it is a good choice to develop some operation and maintenance operation platform process operation and maintenance operation management. In the development of operation and maintenance operation platform, the front-end and back-end are gradually separated, and the front-end is independent into front-end engineering projects.

In the current operation and maintenance development work, when we are faced with self-built front-end, we often discuss vue, Angular, React and other front-end choices. So let’s talk about what a VUE is and what you need to know to do a VUE project, as follows:

JavaScript
ES6
Vue.js
Vue-cli
Vue-router
Vuex
axios
...
Copy the code

What is the vue

Vue is a set of JavaScript frameworks. It is not a stand-alone front-end language. The project vue builds is a single-page application, and the version we use in this article is Vue 2.6.0

What does VUE have: MVVM data bidirectional binding modular layeringCopy the code

The figure shows the evolution of VUE, which we won’t outline here;

See vUE’s official documentation:

Relationship between ES6 and VUE

ES is short for ECMAScript, a front-end standardization organization that implements JavaScript standards. See the differences between JavaScript and ECMAScript for more details

We know that VUE is a framework of JavaScript, so the JavaScript syntax we use when implementing VUE is ES6. To build a VUE project, we need to be familiar with ES6 syntax after certain JavaScript foundation

ES6 is quick to get started

Assuming you’re already familiar with JavaScript, getting started on ES6 requires a bit of content

  • Let and const
  • Arrow function
  • Array method change
  • String method changes
  • Deconstruct assignment and the three dot operators
  • Function method
  • The application of the class
  • Asynchronous Async and Promise applications
  • The model of modular

About the vue

vue-router

Just a brief introduction

In a nutshell, vue-Router is a library used by the front-end engineering to manage the routing structure of the page

Frequently asked Questions

Axios cross-domain CORS

When the VUE project we built requests backend API data, we often get an error similar to the following: a cross-domain problem

1) VuE-CLI configuration is required in vue.config.js

Module. Exports = {devServer: {proxy: {/ / identifier '/ notify: {target:' http://133.59.116.111:8333 ', changeOrigin: True, pathRewrite:{'^/notify': "// remove /notify}, '/game': {target: 'http://133.59.116.222:8334', changeOrigin: true, ws: true, pathRewrite: {' ^ / game: '}}}}}}Copy the code

2) Concatenate identifiers when called

axios.post('/notify'+ '/backend/url', data:{name: 'username'})
Copy the code