vue内容管理系统,vue开源管理系统

需要后端服务器资料的童鞋，访问下面链接~

传送门

umall 后台管理 1.创建项目 vue init webpack umall 2.清空工作

1.assets 清空

2.components 清空

3.router/index.js 删除helloword相关的

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ ]})

4.App.vue重置

3.项目搭建 1.目录结构 -src-assets 静态资源-css -js -components 公共组件index.js 整合公共组件-filters 过滤器index.js 整合过滤器-pages 路由组件-home 某个路由组件home.vue 路由组件-components 路由组件的子组件banner.vuelist.vue-router 路由index.js-store 仓库index.js 创建仓库并导出mutations.js 根级别下 的state mutations gettersacions.js 根级别下的actions-modules 模块-utils 工具类 alert.js 弹框 request.js 数据交互 App.vue 根组件 main.js 入口文件 2.assets

css /reset.css,在main.js引入

//1.assets import "./assets/css/reset.css" 3.公共组件 components

components/index.js

import Vue from "vue"let obj={ }for(let i in obj){ Vue.component(i,obj[i])} 4.路由组件的格式 -pages-home home.vue -componentsbanner.vuelist.vue-detail detail.vue-componentspicker.vue 5.数据交互 1.安装依赖包 npm i axios qs --save 2.配置代理 config/index.js proxyTable: { "/api":{ target:"http://localhost:3000", changeOrigin:true, pathRewrite:{ "^/api":"http://localhost:3000" } } }, 3.utils/request.js import axios from "axios"import qs from "qs"let baseUrl="/api";//响应拦截axios.interceptors.response.use(res=>{ console.group("=====本次请求路径是:"+res.config.url) console.log(res); console.groupEnd() return res;}) 6.过滤器filters

filters/index.js

import Vue from "vue"let obj={ }for(let i in obj){ Vue.filter(i,obj[i])} 7.vuex 1.安装依赖包 npm i vuex --save 2.目录搭建 -store 仓库index.js 创建仓库并导出mutations.js 根级别下 的state mutations gettersacions.js 根级别下的actions-modules 模块 3.store/index.js import Vue from "vue"import Vuex from "vuex"Vue.use(Vuex)import {state,getters,mutations} from "./mutations"import {actions} from "./actions"export default new Vuex.Store({ state, getters, mutations, actions, modules:{ }})

store/mutations.js

export const state={}export const mutations={}export const getters={}

store/actions.js

export const actions={} 4.main.js引入store,并挂到根实例上 //6.vuex import store from "./store"new Vue({ el: '#app', store, }) 8.element-ui 1.安装依赖包 npm i element-ui --save 2.main.js引入 //7.element-uiimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI); 3.二次封装弹框 utils/alert.js import Vue from "vue"let vm = new Vue()export const successAlert = (msg) => { vm.$message({ message: msg, type: 'success' });}export const warningAlert = (msg) => { vm.$message({ message: msg, type: 'warning' });} 4.配置一级路由

1.pages下创建了index 和login组件

2.router/index.js 配置路由规则

export default new Router({ routes: [ { path:"/login", component:()=>import("../pages/login/login.vue") }, { path:"/", component:()=>import("../pages/index/index.vue") } ]})

3.app.vue 定义路由出口

<div> <router-view></router-view> </div>

4.书写了一个用户代码片段

{"Print to console": {"scope": "javascript,typescript,vue","prefix": "vue","body": ["<template>","<div>","<h1>登录</h1>", "</div>", "</template>", "<script>", "import {mapGetters,mapActions} from "vuex"", "export default {", "props:[],", "components:{},", "data(){", "return {", "}", "},", "computed:{", "...mapGetters({", "})", "},", "methods:{", "...mapActions({", "})", "},", "mounted(){},", "}", "</script>", "<style scoped>", "</style>"],"description": "我的vue"}}