step one
1. Installation scaffolding: the install VUE NPM-CLI -g
2.wepack generated html Template: vue init webpack 'filename'
3. Installation axios, js-cookie, element- ui, stylus , etc. common plug
Step Two
1. In introducing main.js router, element-ui, etc.
import Vue from 'vue'
import store from './store' //可以先忽略 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, store, render: h => h(App) }) 2. You can write a component
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm login-container"> <el-form-item label="账号" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { name: '', pass: '' }, rules: { name: [ { required: true, message: '请输入登录账号', trigger: 'blur' } ], pass: [ { required: true, message: '请输入登录密码', trigger: 'blur' } ] } } }, } Step Three
Come this far it is senseless to force it, and, I, too, so I would first see the results before it
1. Registration components, router file here
import Vue from 'vue'
import Router from 'vue-router' import Login from 'components/login/index' const _import = require('./_import_' + process.env.NODE_ENV)//没用上当没看见吧，我就是要写这 Vue.use(Router) export const constantRouterMap = [ { path: '/', component:Login, name:'登录' }, ] export default new Router({ routes: constantRouterMap }) emmmm .... I guess component should be rendered, very good! next
Step Four
Crucial step to look hard vuex
1. First step, easy interface to write call and put api folder of login.js
import axios from 'axios'
import { server } from './config' // 登陆 export const requestLogin = params => { return axios.post(server + '/jade/user/loginManage.action', params, { withCredentials: true, // 跨域凭证 transformRequest: [function(data) { let ret = '' for (const it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } // axios官方文档关于怎么用每个参数是什么说的特别特别清楚，我百度过的 return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then(res => { return Promise.resolve(res.data) }, err => { console.log(err) }) } 2. The use of plug-js-cookie to store user information
import Cookie from 'js-cookie'
export function getToken() { return Cookie.get(TokenKey) } export function setToken(token) { return Cookie.set(TokenKey, token) } export function removeToken() { return Cookie.remove(TokenKey) } export function getRole() { return sessionStorage.getItem('rules') } 3. Well, you can write the actions
import { requestLogin } from 'api/login' import { getToken,setToken,removeToken } from '../../utils/auth' const user = { state: { token: getToken(), name: '', avatar: '' }, mutations: { SET_TOKEN: (state, token) => { state.token = token } }, actions: { // 登录 Login ({commit}, userInfo) { const account = userInfo.account const password = userInfo.checkPass return new Promise((resolve, reject) => { console.log(resolve) console.log(reject) let params = { account: account, password: password } requestLogin(params).then(response => { const data = response.result setToken(data.sid) sessionStorage.setItem('accountType', data.accountType) commit('SET_TOKEN', data.sid) resolve(response) }).catch(error => { reject(error) }) }) } } } export default user 3. Do not forget to register store
import Vue from 'vue'
import Vuex from 'vuex' import user from './modules/user' Vue.use(Vuex) const store = new Vuex.Store({ modules: { user, } }) export default store The last step, back to the assembly
methods: {
submitForm() { this.$refs.ruleForm.validate((valid)=>{ if(valid) { console.log(this.$store) this.$store.dispatch('Login',this.ruleForm).then((res)=>{ console.log(res) if(res.success) { this.$router.push({path:'/'}) }else{ this.$message.error(res.result.error) } }) } }) } }