Open FrankFang opened 7 years ago
电脑没有
1440*1440
的分辨率,在1368*768
下就是截图是这样,我也没办法.
预览链接
@WangXiaoyugg
我看了是 OK,你只要不把宽度写死就行了。 你按 ctrl + - 试试
YCR
预览
@FrankFang 已经修改
不知道为什么生成的链接不正确
ZJY
方方老师的页面好像有一个问题,如果页面宽度太小的话,页面样式会错乱,main
元素里面的东西会往左移动到浏览器窗口外,我在最外层元素上加了min-width:1024px
页面就正常了。
SHZ
@ReedSun 👍 我没考虑小于 1024px 的情况。
预览
ZLQ
需求分析
你首先得知道你要做什么,你才能开始做。
项目目标
做一个工具,用户可以用这个工具来写简历
功能列表
原型图
我们需要画出一个基本的图片,来描述我们的页面是什么样子:
分模块/分区
我们大概将页面分为几个模块,化整为零,分别开发:
每一个区块的内容都不太复杂:
然后你大概看一下每个按钮的功能,就可以开始干了!
初始化项目
我们之前了解过 webpack,但是我们的项目使用 vue-cli 这个工具。由于 vue-cli 其实也是用了 webpack,所以我们用起来不会特别陌生。
然后全局安装 vue-cli(安装在当前目录也可以),并用 vue-cli 来初始化一个 vue 项目
运行完
npm run dev
你就会发现浏览器自动弹出,并访问了 http://localhost:8080/#/ 。webpack 已经在命令行持续运行着,不要关掉它,你用你最喜欢的编辑器打开 resumer 目录即可,我们来看看 vue-cli 生成了些什么。
目录结构
你只要搞清楚源代码在 src 里就行了。
index.html
打开 index.html,里面就一个 div#app,很简单嘛。
想一想,是不是缺点儿什么。
居然没有引用 bundle.js! 但是,如果你去看看 http://localhost:8080/#/ 的源代码,会发现是这样的:
居然多了一行
好吧,我们先接受这个设定,肯定是 vue-cli 在背后做了什么事情。
src/
src 目录的结构如下:
src/main.js
main.js 只是把 #app 替换成了
<App/>
,那么<App/>
是什么呢? components 属性定义了 App:components: { App }
,这是 ES 6 语法,换成 ES 5 语法就是components: { App: App }
。那么 App 到底长什么样子呢? 看import App from './App'
,说明./App.vue
定义了 App 的样子:这是 Vue 单文件组件,你自己看看文档。 一个单文件组件包含三个根标签:
<template>
<script>
和<style>
,三者分别用来表示内容、行为和样式(正交原则)。 使用单文件组件有几个注意事项:<template>
有且仅有一个儿子标签:<script>
里面必须包含 export default {}, 也就是说必须默认导出一个对象,对象的属性见文档。<style>
默认只支持 CSS,想要支持 SCSS 请看 vue-cli webpack 模板的文档。copy 了, run 了,接下来我们 modify
我们来改一改 App.vue。webpack 已经在 watch 文件了,所以改完代码,你直接切到浏览器就可以看到效果了(连刷新都不用)。
改 template 和 style
结果我们看到一个红色的你好。
加个 data
再看页面,居然没有「你好」两个字。出错了?
这个时候你该干什么?
命令行没报错,浏览器呢:
他说 data 应该是一个 function。看看单文件组件的文档,知道应该改成这样:
喝,报错更奇怪了:
原来这是 ESLint 插件认为我们写的代码不符合规范,它说
你有两个选择
如果你想折腾,就选 1, 把代码改成
如果你不想折腾,就去 build/webpack.base.conf.js 里,把 ESLint 给注释掉,然后重新运行
npm run dev
。 我就偷懒,选择后者吧。然后关闭之前的 npm run dev,重新运行。
现在,我爱怎么写就怎么写。
现在,我们基本知道了一个组件要怎么写。
三分天下
我们的应用(App)含有三个部分:顶栏、编辑区和预览。
所以我们新建三个组件。下面是组件结构图:
新建三个 vue 文件:
看代码的过程中有哪里不懂,就在群里问一下,或者在 vue 文档/ ES 6 新特性列表里搜索下。
补充 HTML & CSS
UI 预览在这里:https://jirengu-inc.github.io/jrg-project-5/resumer_mockups/index.html
点击左侧的「编辑」页面,就可以看到页面标注了:
有了标注我们就开始把大体的 HTML 和 CSS 写好。
设计稿的总宽度是 1440px,并没有说明如果页面宽度小于 1440px 会怎样。
这个时候你应该问设计师,「页面宽度如果不足 1440px 我要怎么显示页面?」
目前设计师就是我了。我会说:「按比例缩小吧,最小缩小到 1024px。」
「手机宽度只有不到 400px 怎么办?」
「我们的网站不兼容手机」
「这是你说的哈」
这样我们与设计师的愉快的沟通就结束了,然后你才能开始写代码。
下面是添加样式的过程:
如果你不会 Flex,这里有我的直播课:Flex 到目前为止,效果如下:
继续
然后,当我把分辨率调到 1440px 以上之后,发现 main 并没有居中。(如果你的屏幕不足 1440px,可以缩放一下网页)
现在好看多了:
致饥人谷学员
搞定上面的所有代码,做到和最后一张图基本一致。
如何生成预览链接呢?
首先需要将 config/index.js 中的 assetsPublicPath 改为 '/jrg-project-5/resumer/dist'
然后运行
就会生成一个 dist 目录,dist/index.html 就是可以直接预览的页面(不过必须是 http 协议)
我的预览链接:https://jirengu-inc.github.io/jrg-project-5/resumer/dist/
不知道为什么,
dist/index.html
不行dist/
就可以。预告
两天后出下一次任务,内容是完善三个组件。