VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构

       直接步入主题,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.项目的主要目录结构

VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构_第1张图片

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

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

VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构_第2张图片

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

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

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

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

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

VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构_第3张图片

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

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

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

VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构_第4张图片

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

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

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

 VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构_第5张图片

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

 VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构_第6张图片

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

  VUE+ElementUI+PHP+MySQL实现仿照印记中文网站(2)----前端架构_第7张图片

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

下期介绍数据库的设计

你可能感兴趣的:(vue,前端)