使用 LeanCloud 快速搭建一个网站

LeanCloud → 后端服务器
Vue → 前端框架
Express → 后端框架

使用 LeanCloud 搭建网站的好处在于:

  1. 省钱,流量低的情况下,每个月只需要60元的云引擎费用
  2. 方便,不用维护服务器和数据库的各种状态
  3. LeanCloud SDK 支持多种语言,易于开发和上手

准备工作

  1. 注册 LeanCloud 帐号
  2. 在 LeanCloud 控制台创建一个应用
  3. 安装 LeanCloud CLI
  4. 安装 Vue CLI

后端搭建

1. 使用终端,登录 LeanCloud 帐号

lean login

2. 初始化项目

lean init

3. 按照提示选择即可,这里我使用的是 Node.js 的 Express 作为后端框架

4. 安装桥接库,帮助运行前端项目的

npm install connect-history-api-fallback

在 app.js 中添加:

const history = require('connect-history-api-fallback')
app.use(express.static('dist'))
app.use(history())

5. 一切就绪后,运行下面这个命令即可启动后端

lean up

这个时候只是启动了后端服务器,但是网站的代码还没有部署进来,采用前后端分离的模式,所以接下来创建网站的项目。

前端搭建

1. 使用终端,执行下面的命令

vue create 项目名称

接下来按照提示选择即可,唯一注意的点是,UI 建议选择 element ui,我感觉好用。

2. 项目创建成功后,进入项目,安装 vue-router,Vue Router 是 Vue.js 官方的路由管理器。
它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

npm install vue-router

Vue 结构和路由相关

  • main.js 文件设置路由相关代码
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './router/router'
import './plugins/element.js'

Vue.config.productionTip = false
Vue.use(VueRouter)

const router = new VueRouter({
  routes,
  mode: 'hash',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      if (from.meta.keepAlive) {
        from.meta.savedPosition = document.body.scrollTop;
      }
        return { x: 0, y: to.meta.savedPosition || 0 }
    }
  }
})

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')
  • page 文件夹下则是你的各种页面代码了,具体如何编写页面可以阅读 Vue.js 官网的教程。
  • 创建 router 文件夹,再文件夹下创建 router.js 文件
import App from '../App'

const ItemList = r => require.ensure([], () => r(require('../page/itemList/ItemList')), 'ItemList')
const Home = r => require.ensure([], () => r(require('../page/home/Home')), 'Home')
const Item = r => require.ensure([], () => r(require('../page/item/Item')), 'Item')
//这里 require 的是page页面路径,讲所有页面都引用在这里和下面都结构中

export default [{
    path: '/',
    component: App, //顶层路由,对应index.html
    children: [
        {
            path: '',
            redirect: '/home'
        }, {
            path: '/itemList/:id', // 这种写法是 域名/itemList/1234,之后可以通过 vue params 读取 id 获得 1234
            name: 'itemList',
            component: ItemList
        }, {
            path: '/home',
            name: 'home',
            component: Home,
        }, {
            path: '/item/:id',
            name: 'item',
            component: Item,
        }
    ]
}]

其他

1. 启动前端项目

npm run serve

2. 打包项目

npm run build

部署

前端代码编写完成后,运行 npm run build,将打包好的 dist 文件夹复制到 LeanCloud 项目所在的文件夹内。

在 LeanCloud 项目目录下执行

lean delopy

部署完成后,试着访问下你的主页吧。

访问的域名可以去 LeanCloud 控制台,进入应用-设置后找到

若没有付费,默认使用的体验版云引擎,会有个休眠期,有时候访问会很慢,代表从休眠才启动,之后就后正常速度,长时间不访问又回进入休眠的

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注