【易购管理系统】项目搭建

初始化

将mysql文件通过xampp中的admin

点进去

出现了这个界面,再把我们的sql文件导入进去,这里面我们命名为vue-ego文件
这里面默认了一些与商品相关的数据

后台管理系统

某个后台管理系统,包含商品管理,用户管理,订单信息等等

技术点:
Vue+Vue-router +Vuex+Element-UI+Axios+其他三方库

项目准备

1. mysql
2. iconfont

项目搭建

1. vue create vue-ego
2. vue-router vuex
3. axios
4. vue add element–（按需加载）[在element组件库中将完整组件列表和引入方式引入到项目中的plugins中的element.js]

项目初始化:
1.删除无用的组件home . vue about.vue hello… .
2. css初始化
3. incofont 图标导入
4.删除掉无用的组件

初始化一下css样式

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    vertical-align: middle;
}
body{
    font-family: '微软雅黑', 'Arial Narrow', Arial, sans-serif;
    font-size: 14px;
    background: #f5f5f5;
}

导入图标文件

@font-face {
    font-family: "iconfont";
    /* Project id 2448847 */
    src: url('//at.alicdn.com/t/font_2448847_4xsojqvt7qt.woff2?t=1629440615015') format('woff2'), url('//at.alicdn.com/t/font_2448847_4xsojqvt7qt.woff?t=1629440615015') format('woff'), url('//at.alicdn.com/t/font_2448847_4xsojqvt7qt.ttf?t=1629440615015') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-hetongguanli:before {
    content: "\e610";
}

.icon-youxiang:before {
    content: "\e630";
}

.icon-icon_quit:before {
    content: "\e6a7";
}

.icon-icon-service:before {
    content: "\e669";
}

.icon-icon_nav:before {
    content: "\e616";
}

.icon-product:before {
    content: "\e699";
}

.icon-add-circle:before {
    content: "\e664";
}

.icon-tuichu:before {
    content: "\e63d";
}

.icon-shanchu2:before {
    content: "\e614";
}

.icon-add:before {
    content: "\e734";
}

.icon-xiugai:before {
    content: "\e63c";
}

.icon-shanchu1:before {
    content: "\e66e";
}

.icon-user_1:before {
    content: "\e659";
}

.icon-right-indent:before {
    content: "\e805";
}

.icon-left-indent:before {
    content: "\e7b7";
}

最后将css的初始化和iconfont图标都导入到main.js中去