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 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-projectcnpm 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直接实现组件。