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:

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: '',
  components: { App }
})

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

App.vue

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：

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

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

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

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