项目技术栈
- vue
- vuex
- vue-router
- element-ui
- axios
项目模块化
登录前:
登录后:
登录模块
未登录前:
用户首页模块
登录后的界面:
项目总结(一):
- 登录需要鉴权操作,防止他人入侵。
- element的按需引入是有必要的,减少占用资源方便打包,让项目能够高效推广。
相关代码:
import Vue from 'vue';
import
{
Input,
Button,
Menu,
MenuItem,
Submenu,
Carousel,
CarouselItem,
Breadcrumb,
BreadcrumbItem,
Tabs,
TabPane,
Pagination,
Dialog,
Form,
FormItem,
Notification,
Popconfirm,
Popover,
TableColumn,
Table,
InputNumber,
Image,
Checkbox
} from 'element-ui'
Vue.use(Input)
Vue.use(Button)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(Submenu)
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Popconfirm)
Vue.use(Popover)
Vue.use(TableColumn)
Vue.use(Table)
Vue.use(InputNumber)
Vue.use(Image)
Vue.use(Checkbox)
Vue.prototype.$notify = Notification
- axios配置:点击查看链接即可