// Here are just a first step on the recording process and the pit of personal attention to this point login screen background vue part of the operation management system
First, the first is to build a working environment vue-cli
There are two ways: 1 with NPM; (at the vue, vue-cli and WebPACK installation situation,. CD to the area to be worked on using the command line VUE WebPACK the init (item name), and then set up);
2. Use the command line using vue ui operate personal feeling more friendly for the novice, because in comparison to npm way, the more visual with vue ui to build the project, the following is go vue ui interface;
Second, the installation of about eslint
eslint this true plug it annoying, annoying to have a space, semicolon and so to give you an error, but I think it is their own to develop good programming habits, and to see the console as well as habitual for some basic errors Tip sentence meaning, to find where the error;
Third, install plug-ins and dependent on
Router-VUE (routing, to achieve this essential interface jump);
Axios-VUE (ajax request data repository also essential);
UI-Element (component may invoke the use of some, if used herein vue ui embodiment may involve introducing global demand and introduced, with the demand, then introduced to a component which requires assembly element.js introduced under plugins required, then one by one vue.use () to set the global use);
less (may be useful in the style styling time, you can download using npm, npm install less-Loader --save-dev less );
Fourth, clear all the original interface. Retain the most basic things, such as, in the content app.vue bring their own (with the div id not delete), components built-in below, as well as views following about.vue and hello.vue, app.vue in import original components, which are for the convenience of their own written from scratch;
Fifth, the new global style. In the assets the new next css folder , then create a global.css to save the entire interface style, let body, html, # app can achieve full screen;
Sixth, the login page settings. In the components below to create a new Login.vue login page and then login screen free play, involving the need to form a form and ask the venue button to elemen-ui component tray official website their part of the code they need to select and copy, the following is ;
Seven, simply a few important attributes
1. : Model (! Attention before the colon personally I feel this is the form as an object and then call the object's properties in el-form-item used v-model two-way data binding) (official document of the el-form model attribute described as "form data objects");
2. : rules (note in front of the colon through this message and trigger:! 'Blur' can be set when the mouse leaves the length of the input box when the account password is correct or there is no input prompts, required: true then this represents is an input box required);
3. of the type = "password" in order to hide the password;
Please combine six of the reference picture data
style = plate to set up their own friends. =
Eight, in order to achieve click to enter login page login page, we want to set up routing
First, by introducing import login interface;
Then Vue.use (VueRouter) used globally;
Then set the home address corresponding to other already;
But also set the router label accounted for in app.vue the pit;
The following will update the login page login and reset button jump and set subsequent events page.
Github：ClearLuvMoki，Welcome pointed out deficiencies