做视频解析网站违法不,互联网网站建设问卷调查,济南做外贸网站的公司,游戏开发难还是网站开发难Vue2项目练手——通用后台管理项目 知识补充yarn和npm区别npm的缺点#xff1a;yarn的优点 npm查看镜像和设置镜像 项目介绍项目的技术栈 项目搭建文件目录 创建路由#xff0c;引入element-uirouter/index.jsmain.jspages/Users.vuepages/Main.vuepages/Home.vuepages/Login… Vue2项目练手——通用后台管理项目 知识补充yarn和npm区别npm的缺点yarn的优点 npm查看镜像和设置镜像 项目介绍项目的技术栈 项目搭建文件目录 创建路由引入element-uirouter/index.jsmain.jspages/Users.vuepages/Main.vuepages/Home.vuepages/Login.vueApp.vue 使用element-ui搭建主页样式main页面布局使用这个Main.vue 导航栏使用 导航栏适配Main.vueApp.vueCommonAside 导航栏跳转文件目录src/router/index.jssrc/pages/Mall.vuesrc/pages/pageOne.vuesrc/pages/PageTwo.vuesrc/components/CommonAside.vue 知识补充
yarn和npm区别
npm的缺点
npm install时候巨慢同一个项目安装的时候无法保持一致性。 由于package.json文件中版本号的特点。 “5.0.3” 安装指定的5.0.3版本 “~5.0.3” 表示安装5.0.X中最新的版本 “^5.0.3” 表示安装5.X.X中最新的版本 有时候会出现版本不一致不能运行的情况。
yarn的优点
速度快 并行安装同步执行所有任务不像npm按照队列执行每个packagepackage安装不完成后面也无法执行。 离线模式安装过得软件包直接从缓存中获取不用像npm从网络中获取。安装版本统一更简洁的输出 npm输出所有被安装上的依赖但是yarn只打印必要的信息多注册来源处理安装某个包只会从一个注册来源去安装更好的语义化yarn安装和卸载是yarn add/remove,npm是npm install/uninstall
npm查看镜像和设置镜像 npm config get registry npm config set registry https://registry.npmmirror.com/ 项目介绍
项目的技术栈 使用yarn安装vue-cli yarn global add vue/cli 项目搭建
先vue create创建一个项目然后安装element-ui组件和vue-router,less等组件
文件目录 创建路由引入element-ui
router/index.js
import VueRouter from vue-router;
import Login from /pages/Login.vue;
import Users from /pages/Users.vue;
import Main from /pages/Main.vue
import Home from /pages/Home.vue;const router new VueRouter({// 浏览器模式设置设置为history模式mode:history,routes:[{path:/login,component:Login,meta:{title:登录},},{// 主路由name:main,path:/,component:Main,children:[ //子路由{name:users,path:users,component:Users,meta:{title:用户}},{name:home,path:home,component:Home,meta:{title:主页}}]}]
})// 后置路由守卫
router.afterEach((to,from){document.titleto.meta.title||通用后台管理系统
})
export default routermain.js
import Vue from vue
import App from ./App.vue
import VueRouter from vue-router;
import router from /router;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css
Vue.config.productionTip false
Vue.use(VueRouter)
Vue.use(ElementUI)
new Vue({router,render: h h(App),
}).$mount(#app)pages/Users.vue
templatediv我是Users组件/div/templatescript
export default {name: Users,
}
/scriptstyle scoped/stylepages/Main.vue
templatedivh1main/h1router-view/router-view/div/templatescript
export default {name: Main,
}
/scriptstyle scoped/stylepages/Home.vue
templatedivhome内容/div/templatescript
export default {name: Home,
}
/scriptstyle scoped/style
pages/Login.vue
templatediv idappdiv classmain-contentdiv classtitle系统登录/divdiv classcontentel-form :modelruleForm status-icon :rulesrules refruleForm label-width100px classdemo-ruleFormel-form-item label用户名 propnameel-input v-modelruleForm.name /el-input/el-form-itemel-form-item label密码 proppasswordel-input v-modelruleForm.password typepassword autocompleteoff/el-input/el-form-itemel-form-itemel-row :gutter20el-col :span12 :offset4router-link to/loginel-button typeprimary clicksubmitForm(ruleForm)登录/el-button/router-link/el-col/el-row/el-form-item/el-form/div/div/div/templatescript
export default {name: login,data(){return{ruleForm: {name: ,password:},rules: {name: [{required: true, message: 请输入用户名, trigger: blur},{min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur}],password: [{required:true,message:请输入密码,trigger:blur}]}}},methods:{submitForm(formName) {this.$refs[formName].validate((valid) {if (valid) {// alert(submit!);} else {console.log(error submit!!);return false;}});},}
}
/scriptstyle langless scoped
*{padding: 0;margin: 0;
}
#app {display: flex;background-color: #333;height: 800px;.main-content{height: 300px;width: 400px;background-color: #fff;margin: 200px auto;border-radius: 10px;padding: 30px;box-sizing: border-box;box-shadow: 5px 5px 10px rgba(0,0,0,0.5),-5px -5px 10px rgba(0,0,0,0.5);.title{font-size: 20px;text-align: center;//margin-top: 30px;font-weight: 300;}.content{margin-top: 30px;}}
}
/styleApp.vue
templatediv idapprouter-view/router-view/div
/templatescriptexport default {name: App,
}
/scriptstyle langless
*{padding: 0;margin: 0;
}
/style 使用element-ui搭建主页样式
main页面布局使用这个 Main.vue
templatedivel-containerel-aside width200pxAside/el-asideel-containerel-headerHeader/el-headerel-mainrouter-view/router-view/el-main/el-container/el-container/div/templatescript
export default {name: Main,
}
/scriptstyle scoped/style导航栏使用 导航栏适配
Main.vue
templatedivel-containerel-aside width200pxCommonAside/CommonAside/el-asideel-containerel-headerHeader/el-headerel-main
!-- 路由出口路由匹配到的组件将渲染在这里 --router-view/router-view/el-main/el-container/el-container/div/templatescript
import CommonAside from /components/CommonAside.vue;
export default {name: Main,components:{CommonAside}
}
/scriptstyle scoped/styleApp.vue
templatediv idapprouter-view/router-view/div
/templatescriptexport default {name: App,
}
/scriptstyle langless
html,body,h3{padding: 0;margin: 0;
}
/style
CommonAside
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapse background-color#545c64 text-color#fffactive-text-color#ffd04bh3通用后台管理系统/h3el-menu-item index2 v-foritem in noChildren :keyitem.name :indexitem.namei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/el-menu-itemel-submenu :indexitem.label v-foritem in hasChildren :keyitem.labeltemplate slottitlei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/templateel-menu-item-groupel-menu-item :indexsubItem.path :keysubItem.path v-forsubItem in item.children{{subItem.label}}/el-menu-item/el-menu-item-group/el-submenu/el-menu/templatestyle langless scoped
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-menu{height: 100vh; //占据页面高度100%h3{color: #fff;text-align: center;line-height: 48px;font-size: 16px;font-weight: 400;}
}
/stylescript
export default {data() {return {isCollapse: false,menuData:[{path:/,name:home,label:首页,icon:s-home,url:Home/Home},{path:/mail,name:mall,label:商品管理,icon:video-play,url:MallManage/MallManage},{path:/user,name:user,label:用户管理,icon:user,url:userManage/userManage},{label:其他,icon:location,children:[{path:/page1,name:page1,label:页面1,icon:setting,url:Other/PageOne},{path:/page2,name:page2,label:页面2,icon:setting,url:Other/PageTwo},]},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}},computed:{//没有子菜单的数据noChildren(){return this.menuData.filter(item!item.children)},hasChildren(){return this.menuData.filter(itemitem.children)}//有子菜单数组}
}
/script导航栏跳转
文件目录 src/router/index.js
import VueRouter from vue-router;
import Login from /pages/Login.vue;
import Users from /pages/Users.vue;
import Main from /pages/Main.vue
import Home from /pages/Home.vue;
import Mall from /pages/Mall.vue;
import PageOne from /pages/PageOne.vue;
import PageTwo from /pages/PageTwo.vue;const router new VueRouter({// 浏览器模式设置设置为history模式// mode:history,routes:[{path:/login,component:Login,meta:{title:登录},},{// 子路由name:main,path:/,redirect:/home, //重定向 当路径为/则重定向homecomponent:Main,children:[{name:user,path:user,component:Users,meta:{title:用户管理}},{name:home,path:home,component:Home,meta:{title:首页}},{name:mall,path:mall,component:Mall,meta:{title:商品管理}},{name:page1,path:page1,component:PageOne,meta:{title:页面1}},{name:page2,path:page2,component:PageTwo,meta:{title:页面2}}]}]
})// 后置路由守卫
router.afterEach((to,from){document.titleto.meta.title||通用后台管理系统
})
export default routersrc/pages/Mall.vue
templatediv我是mall/div/templatescript
export default {name: Mall,
}
/scriptstyle scoped/stylesrc/pages/pageOne.vue
templatediv我是PageOne/div/templatescript
export default {name: PageOne,
}
/scriptstyle scoped/stylesrc/pages/PageTwo.vue
templatediv我是PageTwo/div/templatescript
export default {name: PageTwo,
}
/scriptstyle scoped/stylesrc/components/CommonAside.vue
templateel-menu default-active1-4-1 classel-menu-vertical-demo openhandleOpen closehandleClose:collapseisCollapse background-color#545c64 text-color#fffactive-text-color#ffd04bh3通用后台管理系统/h3el-menu-item clickclickMenu(item) v-foritem in noChildren :keyitem.name :indexitem.namei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/el-menu-itemel-submenu :indexitem.label v-foritem in hasChildren :keyitem.labeltemplate slottitlei :classel-icon-${item.icon}/ispan slottitle{{item.label}}/span/templateel-menu-item-groupel-menu-item clickclickMenu(subItem) :indexsubItem.path :keysubItem.path v-forsubItem in item.children{{subItem.label}}/el-menu-item/el-menu-item-group/el-submenu/el-menu/templatestyle langless scoped
.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;min-height: 400px;
}
.el-menu{height: 100vh; //占据页面高度100%h3{color: #fff;text-align: center;line-height: 48px;font-size: 16px;font-weight: 400;}
}
/stylescript
export default {data() {return {isCollapse: false,menuData:[{path:/,name:home,label:首页,icon:s-home,url:Home/Home},{path:/mall,name:mall,label:商品管理,icon:video-play,url:MallManage/MallManage},{path:/user,name:user,label:用户管理,icon:user,url:userManage/userManage},{label:其他,icon:location,children:[{path:/page1,name:page1,label:页面1,icon:setting,url:Other/PageOne},{path:/page2,name:page2,label:页面2,icon:setting,url:Other/PageTwo},]},]};},methods: {handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);},clickMenu(item){// console.log(item)this.$router.push(item.path)}},computed:{//没有子菜单的数据noChildren(){return this.menuData.filter(item!item.children)},//有子菜单数组hasChildren(){return this.menuData.filter(itemitem.children)}}
}
/script
