【小白向】从0到1带小白做一个前后端分离的项目一图书管理系统（一）项目搭建、主题布局

1.项目搭建

1.1准备知识...略

1.2安装软件...略

1.3创建vue工程

安装vue cli

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目

vue create my-project
# OR
vue ui

如果安装较慢：

淘宝镜像网站加速：

安装完vue，创建工程：

 vue create vue

1.4安装element

npm i element-ui -S

导入elementGS,CSS

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
or
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

示例：

main.js文件：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

运行语句：

npm run serve

2.主题布局

2.1图标获取

图标：iconfont

2.2组件 

element

APP.vue

<template>
  <div id="app">
<!--      头部区域-->
      <div style="height: 60px;line-height: 60px;background: white">
        <img src="@/assets/logo.png" alt="" style="width:40px;position:relative;top: 10px;left: 20px">
          <span style="margin-left: 20px;font-size: 24px">图书管理系统</span>
      </div>

<!--      侧边栏和主体-->
      <div style="display: flex;margin-top: 2px;">
        <!--        侧边栏导航-->
          <div style="width: 200px;min-height: calc(100vh - 62px); overflow: hidden;margin-right:2px ; background: white">
                  <el-menu :default-active="$route.path" :default-openeds="['1']" router class="el-menu-demo" >
                      <el-menu-item index="/">
                          <i class="el-icon-eleme"></i>
                          <span>首页</span>
                      </el-menu-item>

                      <el-submenu index="1">
                          <template slot="title">
                              <i class="el-icon-info"></i>
                              <span>关于页面</span>
                          </template>

                          <el-menu-item index="/about">关于详情</el-menu-item>
                      </el-submenu>

                  </el-menu>

          </div>

          <!--      主体数据-->
          <div style="flex: 1;background: white;padding: 10px">
              <router-view/>

          </div>
      </div>

  </div>
</template>


<script>


</script>

homeview.vue

<template>
  <div class="home">
<!--      表单区域-->
      <div>
<!--          搜索表单-->
          <el-input style="width: 240px" placeholder="请输入名称"></el-input>
          <el-input style="width: 240px;margin-left: 5px" placeholder="请输入联系方式" ></el-input>
          <el-button style="margin-left: 5px" type="primary" class=" el-icon-search">搜索</el-button>
      </div>
    <div>
    <el-table :data="tableData" stripe>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>

    </el-table>
    </div>

      <div style="margin-top: 20px">
<!--          分页-->
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="tableData.length">
          </el-pagination>
      </div>
  </div>
</template>

<script>
export default {
    name:'HomeView',
    data(){
        return{
            tableData:[
            ]
        }
    },
    created() {
        // 页面加载时调用方法
        this.load()
    },
    methods:{
        load(){
            // 后台数据接口
            // res即后台user数组
            fetch('https://localhost:9090/user/list')
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    this.tableData = data;
                })
                .catch(error => console.error('Error:', error));
        }
    }
}

</script>

abouview.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

备注：以上只是个人在观看#程序员青戈#b站图书管理系统项目搭建时做的笔记，并不详细，但可以作为辅助观看视频使用。