样式细节

  1. font-weight: 700; //字体粗细
  2. letter-spacing: 3px; //字与字之间的间距
  3. border-radius: 50%; //圆形

项目创建

项目创建

vue create sell
image.png

加入Element -UI

npm 安装 npm i element-ui -S
全部导入 在main.js文件中加入以下代码

  1. import ElementUI from 'element-ui'
  2. import 'element-ui/lib/theme-chalk/index.css'
  4. Vue.use(ElementUI)

创建.prettierrc文件，键入下列内容：

  1. {
  2.   "semi": false,
  3.   "singleQuote": true,
  4.   "trailingComma": "none"
  5. }

在.eslintrc.jsrules中加入

  1. 'space-before-function-paren' : 0

改造项目

1.在src目录下新建layout全局布局文件夹。
2.将 Home移动到 layout,对应修改router\index.js文件中的引用路径
3.删除 helloword.vue

测试element-ui的引入是否成功

在home.vue中插入一段关于element-ui的代码 图中标签内的代码

  1. <template>
  2.   <div class="home">
  3.     <img alt="Vue logo" src="../assets/logo.png" />
  4.     <el-row>
  5.       <el-button>默认按钮</el-button>
  6.       <el-button type="primary">主要按钮</el-button>
  7.       <el-button type="success">成功按钮</el-button>
  8.       <el-button type="info">信息按钮</el-button>
  9.       <el-button type="warning">警告按钮</el-button>
  10.       <el-button type="danger">危险按钮</el-button>
  11.     </el-row>
  12.   </div>
  13. </template>
  15. <script>
  16. export default {
  17.   name: 'Home'
  18. }
  19. </script>

搭建基本结构

项目初始化

各大主流网站css初始化代码
css 初始化 创建 src\assets\css\reset.css
创建自己的样式文件 index.less

  1. html,
  2. body {
  3.   height: 100%;
  4. }
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed, 
  11. figure, figcaption, footer, header, hgroup, 
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video{
  14.   margin: 0;
  15.   padding: 0;
  16.   border: 0;
  17.   font-size: 100%;
  18.   font: inherit;
  19.   font-weight: normal;
  20.   vertical-align: baseline;
  21. }
  22. /* HTML5 display-role reset for older browsers */
  23. article, aside, details, figcaption, figure, 
  24. footer, header, hgroup, menu, nav, section{
  25.   display: block;
  26. }
  27. ol, ul, li{
  28.   list-style: none;
  29. }
  30. blockquote, q{
  31.   quotes: none;
  32. }
  33. blockquote:before, blockquote:after,
  34. q:before, q:after{
  35.   content: '';
  36.   content: none;
  37. }
  38. table{
  39.   border-collapse: collapse;
  40.   border-spacing: 0;
  41. }
  43. /* custom */
  44. a{
  45.   color: #7e8c8d;
  46.   text-decoration: none;
  47.   -webkit-backface-visibility: hidden;
  48. }
  49. ::-webkit-scrollbar{
  50.   width: 5px;
  51.   height: 5px;
  52. }
  53. ::-webkit-scrollbar-track-piece{
  54.   background-color: rgba(0, 0, 0, 0.2);
  55.   -webkit-border-radius: 6px;
  56. }
  57. ::-webkit-scrollbar-thumb:vertical{
  58.   height: 5px;
  59.   background-color: rgba(125, 125, 125, 0.7);
  60.   -webkit-border-radius: 6px;
  61. }
  62. ::-webkit-scrollbar-thumb:horizontal{
  63.   width: 5px;
  64.   background-color: rgba(125, 125, 125, 0.7);
  65.   -webkit-border-radius: 6px;
  66. }
  67. html, body{
  68.   width: 100%;
  69.   font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
  70. }
  71. body{
  72.   line-height: 1;
  73.   -webkit-text-size-adjust: none;
  74.   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  75. }
  76. html{
  77.   overflow-y: scroll;
  78. }
  80. /*清除浮动*/
  81. .clearfix:before,
  82. .clearfix:after{
  83.   content: " ";
  84.   display: inline-block;
  85.   height: 0;
  86.   clear: both;
  87.   visibility: hidden;
  88. }
  89. .clearfix{
  90.   *zoom: 1;
  91. }
  93. /*隐藏*/
  94. .dn{
  95.   display: none;
  96. }

在main.js中引入样式，注意:样式文件都放在asset里面，注意引入的顺序。

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. // 引入初始化css文件
  5. import './assets/css/reset.css'
  7. // 引入element-ui
  8. import ElementUI from 'element-ui'
  9. import 'element-ui/lib/theme-chalk/index.css' 
  11. // 引入自己定义的主样式文件
  12. import './assets/css/index.less'
  13. // 引入字体图标文件
  14. import './assets/fonts/iconfont.css' //使用<p class="iconfont icon-renwu">123</p>
  16. Vue.use(ElementUI)
  18. Vue.config.productionTip = false
  20. new Vue({
  21.   router,
  22.   render: (h) => h(App)
  23. }).$mount('#app')

创建大路由和主页面

当前目录中已有的部件
layout中 Home.vue
views中 About.vue Error.vue Login.vue
并在router/index.js中设置了访问路径。

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import Home from '../layout/Home.vue'
  5. Vue.use(VueRouter)
  7. const routes = [
  8.   {
  9.     path: '/',
  10.     redirect: '/home'
  11.   },
  12.   {
  13.     path: '/home',
  14.     name: 'Home',
  15.     component: Home
  16.   },
  17.   {
  18.     path: '/login',
  19.     name: 'Login',
  20.     component: () =>
  21.       import(/* webpackChunkName: "about" */ '../views/Login.vue')
  22.   },
  23.   {
  24.     path: '/about',
  25.     name: 'About',
  26.     // route level code-splitting
  27.     // this generates a separate chunk (about.[hash].js) for this route
  28.     // which is lazy-loaded when the route is visited.
  29.     component: () =>
  30.       import(/* webpackChunkName: "about" */ '../views/About.vue')
  31.   },
  32.   {
  33.     path: '*',
  34.     redict: '/404'
  35.   },
  36.   {
  37.     path: '/404',
  38.     name: 'Error',
  39.     component: () =>
  40.       import(/* webpackChunkName: "about" */ '../views/Error.vue')
  41.   }
  42. ]
  44. const router = new VueRouter({
  45.   routes
  46. })
  48. export default router

改造登录页面Login.vue

对齐弹性容器中的弹性项目

在 vue 的单文件组件中，没有办法给编译之后的盒子加样式，如果想加，那么有两种方式：
方法一，在全局的 index.less 中找到编译之后的类名或者标签，定义全局的样式。
方法二，在当前的组件中，使用 穿刺的写法。

样式使用的总结 

  1. 如果是将来也需要用到的样式，那么可以声明到 index.less 全局样式中<br />    如果只是局部生效，那么就可以使用穿刺的写法 （注意：先去观察盒子结构，以**最终编译的结果**为准）<br />    在 style 标签中，如果想使用less的语法，一定要加上  lang="less"， 不加的话，默认是css<br />        如果是希望当前的样式私有化，那么一定要加上 scoped 属性，不然会影响其他页面。

表单使用的介绍 

  1.     数据对象、规则对象、ref （获取DOM元素）<br />        数据对象通过  :model 绑定在表单 el-form 上，所有表单元素的 v-model 都是来源这里的数据<br />        规则对象通过 :rules 绑定在表单 el-form 上，在所有的 el-from-item 中使用 prop 进行绑定<br />                        如果有规则，一定保证规则的属性和数据对象的属性一致<br />        ref  这个用来操作DOM，将来点击事件会使用该元素调用对应的方法<br />                        在默认的方法中，使用事件传参的方式进行调用<br />**export导出需要解构。{a,b}**

完成首页基本布局Home.vue

在Element-UI中选一个容器布局 （aseide header main footer）

  1. .el-submenu.is-opened {
  2.     li {
  3.       background-color: #202f3f !important;
  4.     }
  5.   }

给aseide 添加NavMen.vue 导航组件

复制标签包含的内容

logo处理

  1. .logo {
  2.   display: flex;
  3.   justify-content: center; //居中
  4.   align-content: center;
  5.   align-items: center;
  6.   padding: 10px 0;
  7.   // 添加小手
  8.   cursor: pointer;
  10.   // 取消双击选中
  11.   -moz-user-select: none; /*火狐*/
  12.   -webkit-user-select: none; /*webkit浏览器*/
  13.   -ms-user-select: none; /*IE10*/
  14.   -khtml-user-select: none; /*早期浏览器*/
  15.   user-select: none;
  17.   img {
  18.     width: 50px;
  19.     height: 50px;
  20.     border-radius: 50%; //圆形
  21.   }
  23.   h3 {
  24.     color: #fff;
  25.     margin-left: 10px;
  26.     font-weight: 700;
  27.     letter-spacing: 3px; //字与字之间的间距
  28.   }

css双击取消选中文字

  1. div{
  2.     -moz-user-select:none;/*火狐*/
  3.     -webkit-user-select:none;/*webkit浏览器*/
  4.     -ms-user-select:none;/*IE10*/
  5.     -khtml-user-select:none;/*早期浏览器*/
  6.       user-select:none;
  7. }

折叠菜单显示

结构创建在了 el-aside 里面，目的就是将来点击标题的时候，能够控制自己和 aside 的宽度

  1.     <el-aside :width="isCollapse ? '64px' : '200px'">
  2.       <!-- 首页标题 -->
  3.       <div class="logo" @click="isCollapse = !isCollapse">
  4.         <img src="../assets/images/logo.jpg" alt="" />
  5.         <h3 v-show="!isCollapse">外卖商家中心</h3>
  6.       </div>
  7.       <!-- 侧边栏部分 -->
  8.       <NavMenu :bool="isCollapse" /> //给子组件传递参数
  9.     </el-aside>
  11. <!-- 省略了在data中声明 isCollapse 为 false 的值 -->

注意在子组件中接收的方式

  1. <el-menu
  2.          default-active="2"
  3.          class="el-menu-vertical-demo"
  4.          @open="handleOpen"
  5.          @close="handleClose"
  6.          background-color="#304156"
  7.          text-color="#fff"
  8.          active-text-color="#1989fa"
  9.          :collapse="bool"
  10.          :collapse-transition="false"
  11.          >
  13.   <script>
  14.     export default {
  15.       props: {    //接收父组件的参数
  16.         bool: {
  17.           type: Boolean,
  18.           default: false
  19.         }
  20.       }
  21.     }
  22. </script>

剩下的就是美化一下样式

  1. .logo {
  2.   display: flex;
  3.   justify-content: center;
  4.   align-items: center;
  5.   padding: 10px 0;
  6.   // 取消文字选择
  7.   -moz-user-select: none; /*火狐*/
  8.   -webkit-user-select: none; /*webkit浏览器*/
  9.   -ms-user-select: none; /*IE10*/
  10.   -khtml-user-select: none; /*早期浏览器*/
  11.   user-select: none;
  12.   // 添加小手
  13.   cursor: pointer;
  15.   img {
  16.     width: 40px;
  17.     height: 40px;
  18.     border-radius: 50%;
  19.   }
  21.   h3 {
  22.     color: #fff;
  23.     margin-left: 10px;
  24.     letter-spacing: 3px;
  25.   }
  26. }

5.1 header 部分的布局

  1.         header 的部分创建，还是新建到 components 中去，然后以子组件的方式引入到 Home 中

5.2 Main 页面的创建

  1.     1 建  2 配  3 测试
  1. - Dashboard.vue 后台首页
  2. - Order.vue     订单管理
  3. - Product       商品管理
  4.     - Index.vue  主路由文件（二级）
  5.     - ProList.vue    商品列表
  6.     - ProAdd.vue    商品添加
  7.     - ProCate.vue    商品分类
  8. - Shop.vue      店铺管理
  9. - Account       账号管理
  10.     - Index.vue    主路由文件（二级）
  11.     - AccountList.vue   账号列表
  12.     - AccountAdd.vue    添加账号
  13.     - ResetPwd.vue      密码重置
  14. - SellCount             销售统计
  15.     - Index.vue    主路由文件（二级）
  16.     - GoodsCount.vue     商品统计
  17.     - OrdersCount.vue    订单统计

创建上述页面，并配置路由的配置

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import Home from '../layout/Home.vue'
  5. Vue.use(VueRouter)
  7. const routes = [
  8.   {
  9.     path: '/',
  10.     redirect: '/home'
  11.   },
  12.   {
  13.     path: '/home',
  14.     name: 'Home',
  15.     component: Home,
  16.     redirect: '/dashboard',
  17.       // 配置二级路由
  18.     children: [
  19.       {
  20.         path: '/dashboard',
  21.         component: () =>
  22.           import(/* webpackChunkName: "about" */ '../views/Dashboard/index.vue')
  23.       },
  24.       {
  25.         path: '/pro',
  26.         component: () =>
  27.           import(/* webpackChunkName: "about" */ '../views/Product/index.vue'),
  28.         children: [
  29.           {
  30.             path: '/pro/List',  // 二级路由需加一级路由地址
  31.             component: () =>
  32.               import(
  33.                 /* webpackChunkName: "about" */ '../views/Product/proList.vue'
  34.               )
  35.           },
  36.           {
  37.             path: '/pro/add',
  38.             component: () =>
  39.               import(
  40.                 /* webpackChunkName: "about" */ '../views/Product/ProAdd.vue'
  41.               )
  42.           },
  43.           {
  44.             path: '/pro/cate',
  45.             component: () =>
  46.               import(
  47.                 /* webpackChunkName: "about" */ '../views/Product/ProCate.vue'
  48.               )
  49.           }
  50.         ]
  51.       },
  52.       {
  53.         path: '/shop',
  54.         component: () =>
  55.           import(/* webpackChunkName: "about" */ '../views/Shop/index.vue')
  56.       }
  57.     ]
  58.   },
  59.   {
  60.     path: '/login',
  61.     name: 'Login',
  62.     component: () =>
  63.       import(/* webpackChunkName: "about" */ '../views/Login.vue')
  64.   },
  65.   {
  66.     path: '/about',
  67.     name: 'About',
  68.     // route level code-splitting
  69.     // this generates a separate chunk (about.[hash].js) for this route
  70.     // which is lazy-loaded when the route is visited.
  71.     component: () =>
  72.       import(/* webpackChunkName: "about" */ '../views/About.vue')
  73.   },
  74.   {
  75.     path: '*',
  76.     redirect: '/404'
  77.   },
  78.   {
  79.     path: '/404',
  80.     name: 'Error',
  81.     component: () =>
  82.       import(/* webpackChunkName: "about" */ '../views/Error.vue')
  83.   }
  84. ]
  86. const router = new VueRouter({
  87.   routes
  88. })
  90. export default router

完成导航
NavMenu 导航菜单 添加:router="true"，替换index = “路由路径” 。

  1. <el-menu
  2.       default-active="/dashboard" // 默认展示
  3.       :default-active="$route.path"    
  5.       class="el-menu-vertical-demo"
  6.       @open="handleOpen"
  7.       @close="handleClose"
  8.       background-color="#304156"
  9.       text-color="#fff"
  10.       active-text-color="#1989fa"
  11.       :collapse="bool"
  12.       :collapse-transition="false"
  13.       :router="true"
  14.     >