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.项目的主要目录结构