LeanCloud → 后端服务器
Vue → 前端框架
Express → 后端框架
使用 LeanCloud 搭建网站的好处在于:
- 省钱,流量低的情况下,每个月只需要60元的云引擎费用
- 方便,不用维护服务器和数据库的各种状态
- LeanCloud SDK 支持多种语言,易于开发和上手
准备工作
- 注册 LeanCloud 帐号
- 在 LeanCloud 控制台创建一个应用
- 安装 LeanCloud CLI
- 安装 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 控制台,进入应用-设置后找到
若没有付费,默认使用的体验版云引擎,会有个休眠期,有时候访问会很慢,代表从休眠才启动,之后就后正常速度,长时间不访问又回进入休眠的