Vue.js入门（一）——创建第一个vue.js项目

前言

   前端工程化愈演愈热，熟悉几个前端的框架非常的有必要，在接触了angular2的项目之后，再来熟悉一款轻便型的前端框架-Vue,也是目前热门的前端框架之一。

内容

一.vue是什么？
   Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架（Angular2）不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
二.vue的环境：

1.node.js
2.cnpm
3.vue.js
4.vue/cli脚本架

---

三.具体的环境搭建：
  1.node.js下载：https://nodejs.org/en/
  测试node安装成功：

node -v

  2.命令提示符下载cnpm：

pm install cnpm -g --registry=https://registry.npm.taobao.org

  测试cnpm安装成功：

cnpm -v

  3.安装vue.js:

cnpm install vue

  测试vue.js安装是否成功:

cnpm vue -V

  4.全局安装vue/cli脚本架

cnpm install --global vue-cli

---

四： 创建一个简单的vue.js项目

  1.创建一个基于webpack的vue项目

vue init webpack dmsd-project

  2.在创建的项目中引入依赖包：

cd dmsd-project
cnpm install

  3.启动vue项目：

cnpm start

五：项目结构：

六：组件内容的基本信息：

<!-- -----------html模板-------------- -->
<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>


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

<!-- -----------css样式-------------- -->
<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>

  这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。

总结

   vue.js的环境搭建和angular2的基本一致，都需要nodejs和cnpm，都需要语言库，只不过angular2需要typecript语言，而vue项目需要安装vue.js库，都需要脚本架，但是angular2需要的是angular-cli,而vue需要vue-cli。具体的文件结构和angular也有一样的地方。都需要main.ts入门文件，但是两者主要的区别还是在组件上。angular2采用@Component注解方式渲染template，但是vue组件直接在同一个以.vue结尾的文件中以三个部分template,script,style直接实现组件。