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数据库的对接。
网友评论