1. 脚手架搭建 | 网站搭建学习笔记

MEAN技术栈是NodeJS+Express+AngularJS+MongoDB的架构，之前S用来搭建了一个单页应用。这次选择的是VueJS，在我对AngularJS半懂不懂，对VueJS一无所知的情况下，我先想到的是最好有一个现成的框架让我看看，于是去搜了搜yeoman+vue，发现vue有一个自己的脚手架工具叫vue-cli。
Yeoman的生态更丰富一些，vue-cli只有vue的脚手架。我两个都愿意试试，用一篇文章来记录我搭建脚手架的过程。

Yeoman

1. 安装yeoman（mac千万别用root用户装T_T）
$ npm install -g yo
2. 安装完后用yo看看有什么合适的generator
$ yo
3. 选择一个generator，然后安装（可在yo中直接安装），我这里选了fountain-vue
$ npm install -g generator-fountain-vue
4. 新建一个目录，用yo安装脚手架
$ yo
5. 装完后看看README.md中的启动命令是什么
$ npm run dev

网站启动后可以在浏览器输入http://localhost:8080/来访问，可以看到这次安装的脚手架是一个别人用来学习vue的初级网站，很合适新手研究代码用。

fountain-vue

VUE-CLI

vue-cli使用会更加简单一点，连选择的步骤都省了，官网上的例子直接就能搭建出一个最简单的框架出来。

1. 安装vue-cli
$ npm install -g vue-cli
2. 搭建一个名称为first的网站
$ vue init webpack first
3. 进入文件夹并启动
$ cd first
$ npm run dev

网站启动后可以在浏览器输入http://localhost:8080/来访问。

vue-cli

不像直接html写的代码，这个简单的单页其实就用到了vue的组件，vue-router等功能。
index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>first</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

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

可以看到在main.js中引用了组件App：

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <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>

App.vue中就是一个正常的组件，img就是那个大大的V，而后在V下方是用router引入的helloworld组件，这个组件其实包含两个部分，一个index.js：

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

而后才是正主HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

在这个框架中，引申出了几个问题，可以带着这几个问题去查资料了:

index.html, main.js是在哪里指定的（webpack）
vue-router是怎么使用的，比如在App.vue中，只有一个<router-view/>的标签，怎么就引入了后续的页面，如果有多个router，该怎么设置？
index.js和HelloWorld.vue是一对，main.js和App.vue是一对，那是否都需要这样一对一的关系呢？vue组件的模式是怎样的。是否有模式化的写法。

脚手架省去了我很大一部分学习的工作，入口由于直接指定好，所以网站的搭建其实就不需要我操心了，但是还是需要学习一下原理。此外，我们都知道，往往一个网站的框架定下来以后，很多代码都可以用模式化的写法来写了，比如写定输入框、下拉菜单、按钮等组件，后续如果在页面上再添加按钮，直接复制修改即可。

所以接下去要做的就是先研究明白那几个问题，然后熟悉一下开发，设计出网站的色调模式、基本构建，网页这部分就没什么问题了。后续就是与mysql或者mongodb数据库的对接。