MEAN技術(shù)棧是NodeJS+Express+AngularJS+MongoDB的架構(gòu)，之前S用來搭建了一個單頁應(yīng)用。這次選擇的是VueJS，在我對AngularJS半懂不懂，對VueJS一無所知的情況下，我先想到的是最好有一個現(xiàn)成的框架讓我看看，于是去搜了搜yeoman+vue，發(fā)現(xiàn)vue有一個自己的腳手架工具叫vue-cli。
Yeoman的生態(tài)更豐富一些，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
網(wǎng)站啟動后可以在瀏覽器輸入http://localhost:8080/來訪問，可以看到這次安裝的腳手架是一個別人用來學(xué)習(xí)vue的初級網(wǎng)站，很合適新手研究代碼用。
VUE-CLI
vue-cli使用會更加簡單一點，連選擇的步驟都省了，官網(wǎng)上的例子直接就能搭建出一個最簡單的框架出來。
1. 安裝vue-cli
$ npm install -g vue-cli
2. 搭建一個名稱為first的網(wǎng)站
$ vue init webpack first
3. 進入文件夾并啟動
$ cd first
$ npm run dev
網(wǎng)站啟動后可以在瀏覽器輸入http://localhost:8080/來訪問。
不像直接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 target="_blank">Core Docs</a></li>
<li><a target="_blank">Forum</a></li>
<li><a target="_blank">Community Chat</a></li>
<li><a target="_blank">Twitter</a></li>
<br>
<li><a target="_blank">Docs for This Template</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a target="_blank">vue-router</a></li>
<li><a target="_blank">vuex</a></li>
<li><a target="_blank">vue-loader</a></li>
<li><a 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/>的標簽，怎么就引入了后續(xù)的頁面，如果有多個router，該怎么設(shè)置？
- index.js和HelloWorld.vue是一對，main.js和App.vue是一對，那是否都需要這樣一對一的關(guān)系呢？vue組件的模式是怎樣的。是否有模式化的寫法。
腳手架省去了我很大一部分學(xué)習(xí)的工作，入口由于直接指定好，所以網(wǎng)站的搭建其實就不需要我操心了，但是還是需要學(xué)習(xí)一下原理。此外，我們都知道，往往一個網(wǎng)站的框架定下來以后，很多代碼都可以用模式化的寫法來寫了，比如寫定輸入框、下拉菜單、按鈕等組件，后續(xù)如果在頁面上再添加按鈕，直接復(fù)制修改即可。
所以接下去要做的就是先研究明白那幾個問題，然后熟悉一下開發(fā)，設(shè)計出網(wǎng)站的色調(diào)模式、基本構(gòu)建，網(wǎng)頁這部分就沒什么問題了。后續(xù)就是與mysql或者mongodb數(shù)據(jù)庫的對接。
