直接步入主题，3大前端框架我选择的是vue 3.0，使用element-ui作为主要开发组件，Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，虽然官网上写的是基于Vue2.0，但是在Vue3.0中我使用时并没有发现有什么影响。

element-ui中文网：http://element-cn.eleme.io/#/zh-CN

Vue-cli3.0:https://cli.vuejs.org/zh/guide/

        使用Vue-cli3.0搭建的项目相对于2.0来说少了很多的配置文件，因此我们不得不自己来创建。

1.首先看一下用到了哪些npm包

{
  "name": "reouces",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "css-loader": "^2.1.0",
    "ele": "0.0.1",
    "element-ui": "^2.4.11",
    "jquery": "^3.3.1",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue": "^2.5.21",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.5.21"
  }
}

axios：用于与后台数据的交互

element-ui：主要开发组件

less(stylus)、less-loader(stylus-loader)：可根据自己喜好选择一个CSS预处理语言

vue-router：路由

vuex：状态管理

2.项目的主要目录结构

其中标红的为新增文件：store为vuex存放状态管理数据文件，apiconfig.js存放所有与后台交互的接口配置文件，router.js为路由配置文件。

注：为了避免误会，这里解释一下，其中的后台接口文件夹中存放的是使用php编写的后台接口，resources.sql是所有的Mysql数据库接口和数据，这两个文件与前端项目架构并无关系，我只是为了把所有的代码保存到同一个项目文件中。

接下来详细的说明下所有的组件：

· HelloWorld.vue: 项目主入口组件

· footer.vue: 页面的底部footer，用于声明网站备案信息等信息

· header->header.vue:页面顶部导航条

   header->loginDialog.vue: 管理员登陆弹出内容

· content->main: 首页主要内容区

  content->left: 首页主要内容左边展示信息

  content->right:首页主要内容右边区域

  content->element.vue: 每个资源显示模块

· admin->admin.vue: 管理员界面主页

  admin->InformationStatistics.vue: 信息统计模块

 

  admin->classfiy_admin.vue: 资源管理模块

 

  admin->element_Admin.vue: 资源类型管理模块

  

如果对我的项目感兴趣，希望可以关注我支持我是对我前进最大的动力。

下期介绍数据库的设计