- ArthurSlog
- SLog-6
- Year·1
- Guangzhou·China
- July 13th 2018
时候 时候 时候 每一份有限的时候里 都饱含无穷的代价 须要异常珍爱
开辟环境MacOS(High Sierra 10.13.5)
须要的信息:
- brew官方手册,一款MacOS东西,具体内容请移步官方手册
- npm官方手册,一刻nodejs代码包管理东西,具体内容请移步官方手册
- vue官方装置手册,前端框架
- chrome浏览器devtools扩大,用于调试Vue.js运用程序,下一篇举行细致引见和运用,本篇先本身花一分钟做个相识
- vue疾速运用手册,能够先花20分钟的时候写一写感受一下vue的写法
实行计划
- 切换至桌面途径
cd ~/Desktop
- 建立一个新文件夹
mkdir node_vue_learningload
- 切换至新建的文件夹途径下
cd node_vue_learningload
- 运用npm指令初始化nodejs项目环境,一起回车,完成初始化
npm init
- 装置 koa 和 kao-static
sudo npm install koa koa-static
- 须要管理员权限,输入暗码
- 在当前途径下建立 index.js 和 index.html 这两个文件
index.js
const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();
// $ GET /package.json
app.use(serve('.'));
app.listen(3000);
console.log('listening on port 3000');
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 开辟环境版本,包含了有协助的命令行正告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>ArthurSlog</title>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello ArthurSlog!'
}
})
</script>
</body>
</html>
剖析一下上面的两份文件代码:
- 在 index.js 里,引入 koa 框架和 koa-static 中间件完成了一个 静态web服务器,静态路由至当前途径下的 index.html
- 在 index.html 里,引入 vue框架:
index.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 在 index.html 里,vue.js 运用简约的模板语法来声明式地将数据衬着进DOM的体系:
index.html
<body>
<div id="app">{{ message }}</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello ArthurSlog!'
}
})
</script>
</body>
index.html
<div id="app">{{ message }}</div>
index.html
new Vue({
el: '#app',
data: {
message: 'Hello ArthurSlog!'
}
})
- Vue 在背地做了大批事情。如今数据和 DOM 已被建立了关联,一切东西都是相应式的
- 如今启动由 koa框架 和 koa-static中间件 搭建的静态web服务器
node index.js
- 如今翻开浏览器,在地点栏输入静态web服务器的地点 127.0.0.1:3000 ,能够看到页面显现
Hello ArthurSlog!
- 至此,我们运用 vue框架 完成了一个单页运用
- 下一节,会引见 后端框架koa 搭配 前端框架vue,完成前后端的连接