My Project #7

FrankFang · 2017-02-04T09:06:33Z

需求分析

你首先得知道你要做什么，你才能开始做。

项目目标

做一个工具，用户可以用这个工具来写简历

功能列表

添加简历内容，包括个人信息、工作经历、学习经历、获奖情况、项目经历和联系方式。
更新简历内容
选择简历模板
预览简历
发布简历

原型图

我们需要画出一个基本的图片，来描述我们的页面是什么样子：

分模块/分区

我们大概将页面分为几个模块，化整为零，分别开发：

每一个区块的内容都不太复杂：

顶栏。包含 logo 和一些按钮。
编辑区。包含一组按钮和一些表单。
预览区。展示 HTML，可切换模板。

然后你大概看一下每个按钮的功能，就可以开始干了！

初始化项目

我们之前了解过 webpack，但是我们的项目使用 vue-cli 这个工具。由于 vue-cli 其实也是用了 webpack，所以我们用起来不会特别陌生。

> mkdir resumer
> cd resumer
> npm init # 使用 npm init 来生成一个 package.json，方便我们添加依赖
...
Press ^C at any time to quit.
name: (resumer)
version: (1.0.0) 0.1.0
description: 简历制作工具
entry point: (index.js)
test command:
git repository:
keywords:
author: frankfang
license: (ISC)
...

然后全局安装 vue-cli（安装在当前目录也可以），并用 vue-cli 来初始化一个 vue 项目

> npm install -g vue-cli
> vue init webpack .   # 注意这里的 . 字符

? Generate project in current directory? Yes
  This will install Vue 2.x version of the template.

  For Vue 1.x use: vue init webpack#1.0

? Project name resumer
? Project description A Vue.js project
? Author frankfang <[email protected]>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "resumer".


> npm i
> npm run dev

运行完 npm run dev 你就会发现浏览器自动弹出，并访问了 http://localhost:8080/#/ 。

webpack 已经在命令行持续运行着，不要关掉它，你用你最喜欢的编辑器打开 resumer 目录即可，我们来看看 vue-cli 生成了些什么。

目录结构

.
├── README.md
├── build                    # build 目录用于存放构建脚本，比如 webpack 配置文件
├── config                  # config 目录用于存放一些配置信息，比如配置打包后的 bundle 文件存放在哪里
├── index.html           # 首页
├── node_modules    
├── package.json    
├── src                       # 除了首页，其他的源代码都在 src 目录里
├── static                   # static 目录用于放置静态资源，比如 favicon.ico 文件等
└── test                     # 单元测试等代码放在 test 目录里

你只要搞清楚源代码在 src 里就行了。

index.html

打开 index.html，里面就一个 div#app，很简单嘛。

想一想，是不是缺点儿什么。

居然没有引用 bundle.js！
但是，如果你去看看 http://localhost:8080/#/ 的源代码，会发现是这样的：

居然多了一行

<script type="text/javascript" src="/app.js"></script></body>

好吧，我们先接受这个设定，肯定是 vue-cli 在背后做了什么事情。

src/

src 目录的结构如下：

src
├── App.vue              # App.vue 是主组件，后面讲什么是组件
├── assets                 # assets 用于放置代码之外的资源，比如图片、字体等
├── components       # components 用于放置主组件之外的组件，vue 组件的后缀都是 .vue
├── main.js                # JS 入口文件，浏览器执行的第一行代码在这里，所以我们先看这里
└── router                 # 路由，目前用不到

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

main.js 只是把 #app 替换成了 <App/>，那么 <App/> 是什么呢？
components 属性定义了 App：components: { App }，这是 ES 6 语法，换成 ES 5 语法就是 components: { App: App }。那么 App 到底长什么样子呢？
看 import App from './App'，说明 ./App.vue 定义了 App 的样子：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

这是 Vue 单文件组件，你自己看看文档。
一个单文件组件包含三个根标签：<template> <script> 和 <style>，三者分别用来表示内容、行为和样式（正交原则）。
使用单文件组件有几个注意事项：

<template> 有且仅有一个儿子标签：

示例一
<template> <div></div> </template> 正确
示例二
<template> <div></div>  <div></div> </template> 会报错
示例三
<template> 你好 </template> 会报错

<script> 里面必须包含 export default {}，也就是说必须默认导出一个对象，对象的属性见文档。
<style> 默认只支持 CSS，想要支持 SCSS 请看 vue-cli webpack 模板的文档。

copy 了， run 了，接下来我们 modify

我们来改一改 App.vue。webpack 已经在 watch 文件了，所以改完代码，你直接切到浏览器就可以看到效果了（连刷新都不用）。

改 template 和 style

//App.vue
<template>
  <div>
    <p>你好</p>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
  p{color: red;}
</style>

结果我们看到一个红色的你好。

加个 data

<template>
  <div>
    <p>{{text}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: {
    text: '你好'
  }
}
</script>

<style>
  p{color: red;}
</style>

再看页面，居然没有「你好」两个字。出错了？

这个时候你该干什么？

看看命令行有没有报错
看看浏览器有没有报错

命令行没报错，浏览器呢：

> [Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

他说 data 应该是一个 function。看看单文件组件的文档，知道应该改成这样：

<template>
  <div>
    <p>{{text}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function(){
    return {
      text: '你好'
    }
  }
}
</script>

<style>
  p{color: red;}
</style>

喝，报错更奇怪了：

原来这是 ESLint 插件认为我们写的代码不符合规范，它说

花括号前面要加一个空格
函数的圆括号前面要加一个空格

你有两个选择

按照它说的，修改源代码
禁用 ESLint

如果你想折腾，就选 1，把代码改成

<script>
export default {
  name: 'app',
  data: function () {  // 👈 注意空格
    return {
      text: '你好'
    }
  }
}
</script>

如果你不想折腾，就去 build/webpack.base.conf.js 里，把 ESLint 给注释掉，然后重新运行 npm run dev。
我就偷懒，选择后者吧。

// 第35行
  module: {
    rules: [
      //{
        //test: /\.(js|vue)$/,
        //loader: 'eslint-loader',
        //enforce: "pre",
        //include: [resolve('src'), resolve('test')],
        //options: {
          //formatter: eslintFriendlyFormatter
        //}
      //},
      {

然后关闭之前的 npm run dev，重新运行。

现在，我爱怎么写就怎么写。