概述

本教程基于vue、elementui、腾讯云开发等技术搭建一个在线的会员管理系统，搭建分为三个部门，vue脚手架的建立，腾讯云开发资源的开通，腾讯云开发SDK的使用

vue脚手架的搭建

npm的安装

vue的安装的前提是需要本机先安装nodejs,nodejs的下载地址nodejs下载地址

安装完毕后在命令行窗口验证输入npm -v

vue cli 安装

vue分为脚手架的使用和cdn的引入使用两种，按现在前后端分离的路线的话还是使用脚手架比较好，所谓的脚手架就相当于我们传统开发的原型工程，牛逼的人已经把你需要的各种组件都集成了，你就可以方便的使用集成好的工具来进行开发了。
安装命令

npm install -g @vue/cli

vue-element-admin安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

# 本地开发 启动项目
npm run dev

安装后的目录分析

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据
├── plop-templates             # 基本模板
├── public                     # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── directive              # 全局指令
│   ├── filters                # 全局 filter
│   ├── icons                  # 项目所有 svg icons
│   ├── lang                   # 国际化 language
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintrc.js               # eslint 配置项
├── .babelrc                   # babel-loader 配置
├── .travis.yml                # 自动化CI配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

项目启动后的界面

后续开发我们需要vscode下载地址VSCODE
工具安装完毕后打开刚才下载好的项目

腾讯云开发资源的开通

前端框架下载好后，因为我们需要有空间存我们发布代码的地方，而且还需要能支持后端方法的编写和保存数据，后端的选型我们选择腾讯的云开发，业务逻辑和数据库还有存储都提供了比较方便，腾讯云的官网地址腾讯云

点击控制台扫码即可


登录之后需要新建一个按量付费的环境，并且开通静态网站部署功能

腾讯云开发SDK的使用

为了调用腾讯云的API需要先安装腾讯云的cli

npm install -g @cloudbase/cli

引入腾讯云的vue插件

npm install --save @cloudbase/vue-provider

插件引入之后需要在VUE中使用，打开main.js

import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control
import Cloudbase from '@cloudbase/vue-provider'
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
Vue.use(Cloudbase, {
  env: '****'//需要写自己的腾讯云的资源ID
})
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

之后就可以访问腾讯云的SDK按需使用，SDK

源码

源码请访问
https://gitee.com/tuodagitee/membercms.git