`
LiYunpeng
  • 浏览: 951010 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

开始学习Vue.js

    博客分类:
  • Vue
阅读更多
准备工作

开发工具我使用了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
来运行启动这个生成的项目
分享到:
评论

相关推荐

    vue.js和vue.min.js

    Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪(Evan You)开发,旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的,但它们在实际应用中...

    Vue.js学习文档

    - **起源**:Vue.js 最初由尤雨溪(Evan You)在2013年底作为个人实验项目开始开发。 - **公开发布**:2014年2月正式公开发布。 - **重大版本更新**: - 2014年11月发布从头重写的0.11版本。 - 2016年5月发布...

    vue.js项目实战,vue.js项目实战pdf下载,JavaScript

    Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发,因其简单易学、高效灵活的特性,在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战",旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术,从而...

    Vue.js和node.js安装包(windows下64位)

    Vue.js是一款轻量级的JavaScript库,以其易学易用、灵活性高和组件化特性受到开发者喜爱。Node.js则基于Chrome V8引擎,允许开发者使用JavaScript进行服务器端编程,实现了全栈JavaScript开发的可能性。 Vue.js的两...

    Vue.js前端开发实战-源代码.zip

    Vue.js 是一款轻量级的前端JavaScript框架,由尤雨溪开发并维护,以其易学易用、高性能、灵活的组件系统以及强大的生态系统而受到广大开发者喜爱。本资源"Vue.js前端开发实战-源代码.zip"是针对Vue.js的学习资料,...

    Vue.js技术揭秘 完整版PDF

    目前社区有很多 Vue.js 的源码解析文章,但是质量层次不齐,不够系统和全面,这本电子书的目标 是全方位细致深度解析 Vue.js 的实现原理,让同学们可以彻底掌握 Vue.js。 为了把 Vue.js 的源码讲明白,课程设计成...

    Vue.js前端开发 PDF

    Vue.js的设计理念是简洁、易用且高效,它旨在通过最小的学习曲线提供强大的功能,使得开发者能够快速构建交互式的用户界面。Vue.js的PDF文档通常会涵盖以下几个主要的知识点: 1. **基础概念**:Vue.js的基础包括...

    vue.js教程.pdf

    node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台,提供了事件驱动 I/O 服务端 JavaScript 环境。npm 是 node 的包管理工具,极大地便利了我们的开发工作。 webpack webpack 是一个流行的前端构建工具...

    阶段五:Vue.js项目实战资料.zip

    Vue.js 是一款流行的前端JavaScript框架,用于构建用户界面。在这个“阶段五:Vue.js项目实战资料.zip”中,我们能够找到关于使用Vue.js进行实际项目开发的详细资源,特别是针对一个名为“黑马头条”的社交媒体项目...

    Vue.js前端开发实战-自测卷和课后习题答案.rar

    Vue.js 是一款流行的轻量级前端JavaScript框架,用于构建用户界面。它以其声明式的数据绑定、组件化开发和简易的学习曲线而备受开发者喜爱。在这个"Vue.js前端开发实战-自测卷和课后习题答案"的压缩包中,包含了与...

    vue.js和vue.min.js.rar

    1. **vue.js** 是未经过压缩和混淆处理的源代码版本,保留了完整的注释和可读性,便于开发者调试和学习Vue的内部工作原理。如果你正在开发阶段,建议使用这个版本,因为这样可以方便地查看错误信息和理解代码逻辑。 ...

    我如何使用 Django + Vue.js 快速构建项目.pdf

    2. Vue.js框架的选型理由:文档强调了Vue.js作为MVVM框架的诸多优点,比如数据双向绑定、单文件组件、清晰的生命周期以及学习曲线平滑。单文件组件模式使得每个组件都能独立拥有自己的模板、逻辑和样式,这有助于...

    idea插件 vue.js IDEA2017.3亲测可装 无兼容问题

    Vue.js 是一款流行的前端JavaScript框架,由尤雨溪开发,设计思想是使开发过程更加简单、易用。Vue.js 的核心特性包括数据绑定、组件化、指令系统和虚拟DOM,这些都极大地提高了开发效率和代码复用性。在IntelliJ ...

    轻量级MVVM框架Vue.js快速上手视频教程下载

    学完本系列课程后,学员将会达到学习目标:只要具有JavaScript基础的学员都能灵活运用Vue.js技术设计前端程序。 实践阶段由浅入深分为四个案例:动态评分、图片轮播、OLTP管理界面、聊天室。聊天室程序则体现了Vue...

    vue.js 课件 ppt

    同时,还将学习Vue实例的创建以及如何在HTML模板中使用`&lt;template&gt;`、`&lt;script&gt;`和`&lt;style&gt;`标签。 第2章“Vue数据绑定”是Vue.js的核心特性之一,讲解了如何使用`v-bind`指令将数据绑定到DOM元素,以及如何使用`v-...

    Vue.js前端 JavaScript 框架

    轻量级易上手:Vue.js 的学习曲线相对较低,文档丰富、示例代码丰富,适合初学者和有经验的开发人员使用。 高效灵活:Vue.js 支持自定义指令和过滤器,具有很高的灵活性,并且可以轻松集成到现有项目中。 支持...

    Vue.js渐进式框架 v2.7.16.zip

    总的来说,"Vue.js 渐进式框架 v2.7.16.zip"提供了一个深入学习Vue.js的好机会,无论是为了理解其工作原理,还是为了在实际项目中更高效地使用,都能从中受益匪浅。通过源码学习,可以提升对前端开发的理解,对于...

Global site tag (gtag.js) - Google Analytics