단계 하나
1. 설치 비계 : 설치 VUE NPM-CLI -g
2.wepack는 HTML 템플릿을 생성 : VUE 초기화 웹팩 '파일 이름'
3. 설치 Axios의, JS-쿠키, 엘리먼트 - UI, 스타일러스 등 일반적인 플러그를
단계 두
1. main.js 라우터 소자 UI 등을 소개
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. 구성 요소를 작성할 수 있습니다
<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' } ] } } }, } 단계 세
나는, 너무, 그래서 내가 먼저하기 전에 결과를 볼 것이다, 그것을 강제로 무의미하다 여기까지 와서, 그리고
여기, 1. 등록 구성 요소를 라우터 파일을
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 .... 나는 요소가 렌더링되어야한다 생각, 아주 좋은! 다음
단계 네
중요한 단계는 하드 vuex보고
1. 첫 번째 단계는 쉬운 인터페이스는 전화를 작성하고 login.js의 API 폴더를 넣어
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. 사용자 정보를 저장 플러그인 JS-쿠키의 사용
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. 글쎄, 당신은 작업을 쓸 수 있습니다
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. 저장소를 등록하는 것을 잊지 마세요
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 다시 조립의 마지막 단계,
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) } }) } }) } }