网站线下推广方式,网络营销渠道,徐汇建设机械网站,邢台123信息港VUE写后台管理#xff08;2#xff09; 1.环境2.Element界面3.Vue-Router路由后台1.左导航栏2.上面导航条 1.环境
1.下载管理node版本的工具nvm#xff08;Node Version Manager#xff09; 2.安装node(vue工程的环境管理工具)#xff1a;nvm install 16.13.0 3.安装vue工… VUE写后台管理2 1.环境2.Element界面3.Vue-Router路由后台1.左导航栏2.上面导航条 1.环境
1.下载管理node版本的工具nvmNode Version Manager 2.安装node(vue工程的环境管理工具)nvm install 16.13.0 3.安装vue工程的脚手架npm install -g vue/cli 4.在合适的路径下创建工程vue create back-manage 5.项目最终打包npm run build生成dist文件夹就是打包文件。
2.Element界面
1.安装npm install element-plus --save和图标安装npm install element-plus/icons-vue 2.全局引入
import { createApp } from vue
import ElementPlus from element-plus
import element-plus/dist/index.css
import App from ./App.vue
const app createApp(App)
app.use(ElementPlus)
app.mount(#app)3.按需引入 首先安装插件npm install -D unplugin-vue-components unplugin-auto-import npm install babel-plugin-component --save-dev 然后修改工程的babel.config.js文件
module.exports {presets: [vue/cli-plugin-babel/preset,[babel/preset-env,{modules:false}]],plugins: [[component,{libraryName: element-ui,styleLibraryName: theme-chalk}]]
}最后在main.js里面按需引入
import { createApp } from vue
import { ElButton, ElRow } from element-plus
import element-plus/dist/index.css
import App from ./App.vue
const app createApp(App)
app.use(ElButton)//按需引入
app.use(ElRow)
app.mount(#app)因为之后使用element组件但element很多代码都用到了tstypescripte语法因此需要安装相关依赖并配置npm install types/element-ui --save-dev 搞了好久没成功干脆在最初创建项目时手动选择然后选择到typescript。
3.Vue-Router路由
1.安装npm install vue-router 2.在工程的src目录下新建router/index.js作为路由配置文件 3.在工程的src目录下新建views目录作为视图组件然后在里面创建自己的组件文件Home.vue和User.vue 4.在工程的vue.config.js中关闭eslint代码风格规范校验lintOnSave:false 5.开始在router/index.js里面将路由和组件进行映射并创建router示例导出
import { createRouter, createWebHistory } from vue-router;
import Home from ../views/Home.vue;
import User from ../views/User.vue;
const routes[{path:/home,component:Home},//1.将路由和组件进行关系映射{path:/user,component:User},
];
const router createRouter({history: createWebHistory(),//2.使用vue-router创建router实例routes: routes,//缩写routes
});
export default router;//3.导出router示例6.在main.js中将上面导出的router挂载到根节点上。
import { createApp } from vue
import App from ./App.vue
import router from ./router // 导入你的路由配置文件
const app createApp(App)
app.use(router) // 使用 Vue Router 插件
app.mount(#app)7.在App.vue里面写路由出口将路由匹配到的组件渲染在此位置router-view/router-view 8.嵌套路由 创建main组件然后在index.js里面进行路由和组件的映射
const routes[{path:/,//主路由component:Main,children:[{path:/home,component:Home},//子路由{path:/user,component:User},]}
];而组件的渲染位置除了主路由在App.vue里面渲染子组件也在主组件的vue里面渲染所以要在主组件里面添加router-view/router-view
后台
1.左导航栏
1.使用element组件搭建Main.vue的主要框架Container 布局容器Menu 菜单,Icon 图标 icon用到了element的icon需要下载npm install element-plus/icons-vue并在main.ts里面导入使用
import { createApp } from vue
import App from ./App.vue
import ./registerServiceWorker
import router from ./router
import store from ./store
import ElementPlus from element-plus
import element-plus/dist/index.css
// createApp(App).use(store).use(ElementPlus).use(router).mount(#app)
import * as ElementPlusIconsVue from element-plus/icons-vue
const app createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
app.use(store).use(ElementPlus).use(router).mount(#app)2.使用到了less的css解析器所以要下载npm i less less-loader,然后在style里面加上style langless scope 我的CommentLeft.vue文件如下
templateel-row classtacel-col :span12el-menuactive-text-color#ffd04bbackground-color#545c64classel-menu-vertical-demodefault-active2text-color#fffopenhandleOpenclosehandleCloseh5 classmb-2后台管理/h5el-menu-item clickclickMenu(item) v-foritem in noChildren :keyitem.name :indexitem.nameel-icon component :isitem.icon/component/el-icontemplate #title{{item.label}}/template/el-menu-itemel-sub-menu v-foritem in hasChildren :keyitem.label :indexitem.labeltemplate #titleel-icon component :isitem.icon/component/el-iconspan{{item.label}}/span/templateel-menu-item-group clickclickMenu(subitem) v-forsubitem in item.children :keysubitem.pathel-menu-item :indexsubitem.name{{subitem.name}}/el-menu-item/el-menu-item-group/el-sub-menu/el-menu
/el-col
/el-row
/templatescript langts setup
import { ref, computed } from vue;
import { useRouter } from vue-router
const handleOpen (key: string, keyPath: string[]) {console.log(key, keyPath)
}
const handleClose (key: string, keyPath: string[]) {console.log(key, keyPath)
}const menuData [{path: /,name: home,label: 首页,icon: House,url: Home/Home,},{path: /mall,name: mall,label: 商品管理,icon: GoodsFilled,url: MallManage/MallManage,},{path: /user,name: User,label: 用户管理,icon: User,url: UserManage/UserManage,},{label: 其他,icon: Location,children: [{path: /one,name: page1,label: 页面1,icon: Setting,url: Other/PageOne,},{path: /two,name: page2,label: 页面2,icon: Setting,url: Other/PageTwo,},],},
];
const noChildren computed(() menuData.filter(item !item.children));
const hasChildren computed(() menuData.filter(item item.children));
const router useRouter();
const clickMenu (item) {if (router.currentRoute.value.path ! item.path !(router.currentRoute.value.path /home item.path /)) {router.push(item.path);}
};/scriptstyle langless scope
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-menu{height:100vh;h5{color:#fff;text-align:center;line-height: 48px;font-size:16px;font-weight:400px;}
}
/style2.上面导航条
1.使用到了icon和Dropdown 下拉菜单。 2.使用到了Vuex进行状态管理模式就是在一个父组件下面有的好多子组件然后这些子组件共享某些数据下载npm install vuexnext --save在我这里面现在left和header这两个子组件共享了isCollapse这个值。
