vue 框架总结 使用elementUI

安装脚手架 vueCli

npm install -g @vue/cli
vue create template_demo
cd template
npm run serve

安装elementUI

npm i element-ui -S

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

安装路由

npm install vue-router --save

app.vue

<template>
	<div id="app">
		<router-view :key="$route.fullPath" />
	</div>
</template>

<script>
	export default {
		name: 'App',
		components: {}
	}
</script>

<style>

</style>

在src下新建目录router router下新建index.js
src>router>index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [{
		path: '/',
		name: 'login',
		meta: {
			title: '登录'
		},
		component: () => import('../views/login/login.vue')
	},
	{
		path: '/index',
		name: 'index',
		meta: {
			title: '首页'
		},
		component: () => import('../views/index/index.vue')
	},
]

const router = new VueRouter({
	mode: 'hash',
	base: process.env.BASE_URL,
	routes,
	scrollBehavior(to, from, savedPosition) {
		if (savedPosition) {
			return savedPosition
		} else {
			return {
				x: 0,
				y: 0
			}
		}
	}
})
router.beforeEach((to, from, next) => {
	if (to.meta.title) {
		document.title = to.meta.title
	}
	next()
})
export default router

main.js 引入

import router from './router'

new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

在src下新建 views文件

分别创建index>index.vue login>login.vue
login.vue

<template>
	<div>
		我是登录页
		<div class="index" @click="goIndex">去首页</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {};
		},
		methods: {
			//   提交
			goIndex() {
				this.$router.push({
					path: '/index'
				})

				//登录api请求完成后跳转
				// ...
				// this.$api.goLogin(this.formData).then(res => {
				// 	if (res.code == 200) {
				// 		sessionStorage.setItem('user', JSON.stringify(res.data))
				// 		this.$message.success(res.msg)
				// 		// 完成后跳转
				// 		setTimeout(() => {
				// 			this.$router.push({
				// 				path: '/index'
				// 			})
				// 		}, 1000)
				// 	} else {
				// 		this.$message.error(res.msg)
				// 	}
				// })
			}
		}
	};
</script>

<style>
	.index{
		color: #ff0000;
	}
</style>

index.vue

<template>
	<div>我是首页</div>
</template>

<script>
</script>

<style>
</style>

全局 store管理
安装vuex

npm install --save vuex

在src在新建store文件 在store文件下新建index.js
src>store>index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state: {},
	mutations: {},
	actions: {},
	modules: {}
})

main.js 引入

import store from './store'

new Vue({
	store,
  render: h => h(App),
}).$mount('#app')

api请求
在index.vue中看到需要api接口

在src下新建utils 存放全局方法
安装依赖 axios js-cookie

npm install --save js-cookie
npm install axios

在utils下新建auth.js
src>utils>auth.js

import Cookies from 'js-cookie'
const TokenKey = 'vue_admin_template_token'
export function getToken() {
  return Cookies.get(TokenKey)
}
export function setToken(token) {
  return Cookies.set(TokenKey, token)
}
export function removeToken() {
  return Cookies.remove(TokenKey)
}

在utils下新建errorCode.js （可以参考vue-admin-template中自己编写）
src>utils>errorCode.js

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

在utils下新建request.js （可以参考vue-admin-template中自己编写）
src>utils>request.js

import axios from 'axios'
import {Notification,MessageBox,Message} from 'element-ui'
import { getToken } from '@/utils/auth'
import errorCode from '@/utils/errorCode'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
	// axios中请求配置有baseURL选项，表示请求URL公共部分
	baseURL: process.env.VUE_APP_BASE_API,
	// 超时
	timeout: 5000 
})
// request拦截器
service.interceptors.request.use(config => {
	// 是否需要设置 token
	const isToken = (config.headers || {}).isToken === false
	if (getToken() && !isToken) {
		config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
	}
	return config
}, error => {
	console.log(error)
	Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(res => {
		// 未设置状态码则默认成功状态 根据返回状态码调整
		const code = res.data.code || 200;
		// 获取错误信息
		const msg = errorCode[code] || res.data.msg || errorCode['default']
		if (code === 401) {
			MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
				confirmButtonText: '重新登录',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
					location.href = '/login';
			})
		} else if (code === 500) {
			Message({
				message: msg,
				type: 'error'
			})
			return Promise.reject(new Error(msg))
		} else if (code !== 200) {
			Notification.error({
				title: msg
			})
			return Promise.reject('error')
		} else {
			return res.data
		}
	},
	error => {
		console.log('err' + error)
		let {
			message
		} = error;
		if (message == "Network Error") {
			message = "后端接口连接异常";
		} else if (message.includes("timeout")) {
			message = "系统接口请求超时";
		} else if (message.includes("Request failed with status code")) {
			message = "系统接口" + message.substr(message.length - 3) + "异常";
		}
		Message({
			message: message,
			type: 'error',
			duration: 5 * 1000
		})
		return Promise.reject(error)
	}
)

export default service

在src在新建api文件 api文件下新建index.js

import request from '../utils/request'

// 获取短信验证码
export function getCodeImg(query) {
	return request({
		url: 'student/sendCode',
		method: 'get',
		params: query
	})
}

// 登录
export function goLogin(query) {
	return request({
		url: 'student/logonUser',
		method: 'post',
		params: query
	})
}

main.js中引入

import * as api from './api/index'
Vue.prototype.$api = api

根目录下 新建vue.config.js

'use strict'
const path = require('path')

function resolve(dir) {
	return path.join(__dirname, dir)
}

const name = '官网' // 标题

const port = 80 // 端口

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分，具体配置参考文档
module.exports = {
	// 部署生产环境和开发环境下的URL。
	// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
	// 例如 https://www.qqkj.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.qqkj.com/admin/，则设置 baseUrl 为 /admin/。
	publicPath: "/",
	// 在npm run build 或 yarn build 时 ，生成文件的目录名称（要和baseUrl的生产环境路径一致）（默认dist）
	outputDir: 'dist',
	// 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
	assetsDir: 'static',
	// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
	productionSourceMap: false,
	// webpack-dev-server 相关配置
	devServer: {
		host: '0.0.0.0',
		port: port,
		open: true,
		proxy: {
			// 参考: https://cli.vuejs.org/config/#devserver-proxy
			"/api": {
				target: `http://127.0.0.1:8082`,
				changeOrigin: true,
				pathRewrite: {
					'^/api' : ''
				}
			}
		},
		disableHostCheck: true
	},
	configureWebpack: {
		name: name,
		resolve: {
			alias: {
				'@': resolve('src')
			}
		}
	}
}

基本的vue框架就完成了