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 = falsenew 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 => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === falseif (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框架就完成了

vue 框架总结使用elementUI相关推荐

基于vue框架下使用Element-UI获取文件MD5值并上传
基于vue框架下使用Element-UI获取文件MD5值并上传使用插件: spark-md5 .vue页面 <el-uploadclass="avatar-uploader idca ...
老张 .NetCore与Vue 框架学习
缘起作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
java计算机毕业设计springboot+vue学生宿舍管理系统 elementui
通篇文章的撰写基础是实际的应用需要,然后在架构系统之前全面复习大学所修习的相关知识以及网络提供的技术应用教程,以学生宿舍管理系统的实际应用需要出发,架构系统来改善现学生宿舍管理系统及出入登记平台工作流 ...
基于 SpringBoot + Vue 框架开发的网页版聊天室项目
‍ ‍简介微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室.使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocke ...
flask template中使用Vue，遇到引入element-ui无效问题，Unknown custom element did you register the component correc
本人最近在将A项目中的一个flask template页面前后端代码,迁移至B项目的中. A项目 template页面中使用了Vue,使用了element-ui组件.B项目也是flask 框架,之前没 ...
在vue项目中使用Element-ui基本教程
element-ui是饿了么推出的一个开源ui库,它不依赖于vue.但是却是当前和vue配合做项目开发的一个比较好的ui框架. 官网:Element - The world's most popula ...
vue框架开发环境搭建
说明该文章用最简单粗暴的方式完成vue框架的搭建,跟着步骤一步一步来就ok,这里就不阐述什么原理了,直接开工. 第一步:下载并安装Node.js 安装包请移步Node中文官网,直接点我进去找就行打 ...
Vue项目引入引入ElementUI
目录一.安装ElementUI 二.完整引入elementUI 1.在main.js中引入elementUI 2.测试三.按需引入elementUI 1.安装babel-plugin-compon ...
Vue 框架-02-事件：点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({//注意代码格式//el:eleme ...

vue 框架总结使用elementUI

vue 框架总结使用elementUI相关推荐

最新文章

热门文章

vue 框架总结 使用elementUI

vue 框架总结 使用elementUI相关推荐

最新文章

热门文章

vue 框架总结使用elementUI

vue 框架总结使用elementUI相关推荐