开始学习Vue.js

准备工作

开发工具我使用了WebStorm,在里面进行了插件安装,步骤如下
1.安装插件
打开Settings(或者Preferences)=>Plugins=>Browse repositories,然后搜索vue,则会查找到vue进行安装
2.设置JavaScript语言的支持版本到ES6
Settings(Preferences) => Language & Frameworks =>  JavaScript. Set Javascript Language Version 修改为 ECMAcript6



开始编写
Vue其实和AngularJS很像,所有对于写过Angular的人来讲会更快理解一些

HTML标签
<div id="app">
  {{ message }}
</div>


new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

以上就是一个最简单的例子,来自官方
http://v1.vuejs.org/guide/index.html



构建项目
vue有自己的构建工具(vue-cli)
主要是结合webpack或者browserify来生成构建项目

首先先进行安装vue-cli,(需要node环境)
npm install -g vue-cli
,全局安装vue-cli
通过vue list可以列出vue-cli所支持的模板,也就是可以构建出不同模板形式的项目结构
比如使用webpack模板

vue init webpack getStart

会帮我们创建一个基于webpack构建的项目,生成相应的文件目录以及代码
cd getStart
进入项目目录之后
npm install
进行安装项目得依赖,安装完成后,使用
npm run dev
来运行启动这个生成的项目

猜你喜欢

转载自liyunpeng.iteye.com/blog/2330321