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