美文网首页我爱编程
Vue学习总结之HelloWorld

Vue学习总结之HelloWorld

作者: IT码哥 | 来源:发表于2018-02-28 12:02 被阅读0次

    简单介绍一下自己,我是一名Android 开发工程师,15年来到现在的公司,负责研发部移动互联网的产品开发。公司是一家专业从事车载无线数传、视频采集和卫星定位智能监控产品的研发、生产、营销和运营为一体的国家高新技术企业。公司的app主要是使用原生开发,而我便同时兼任两个平台的开发----Android、IOS。 为了提高开发效率,减少时间及维护成本,公司决定使用当前主流的前端技术框架,而我为了进一步提高自己,顺应公司的发展和改变,开始了学习Vue 之路。

    Vue 简单介绍:

    什么是Vue?

    Vue工作环境的搭建

    开始第一个Vue 程序: HelloWorld

    参考网址

    1.什么是Vue ?

    答: 官方解释为“Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。”

    个人理解,Vue 其实就是一个技术框架,与 另一个主流的框架Angular 类似。那两者有何区别呢?

    Vue ---- 上手简单、易学习,文档说明丰富; 指令是以v-xxx 开始,由HTML+JSON+new Vue() 对象组成; 属于个人维护(咱中国人写的);适合用于移动项目。

    Angular --- 上手较难、框架大;指令以ng-xxx 开始,方法及属性都放在$scope 里;由Google维护,适合PC端。

    共同点:不兼容低版本的IE 浏览器。

    2. Vue工作环境的搭建

    参考:https://cn.vuejs.org/v2/guide/installation.html

    1. 可以直接下载Vue.js 文件,使用时直接copy 到项目中。

    2. 使用Vue CDN 在线链接,百度一下就知道。

    3. 使用NPM 命令。

    注:使用之前必须安装node.js,node.js 的安装请到这里:http://nodejs.cn/download/

    总结常用NPM 命令:

    # 最新稳定版$ npm install vue

    # 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖,走你$cdmy-project$ npm install$ npm run dev

    3. 开始第一个Vue 程序: HelloWorld

    首先打开nodepad++ 记事本。写如下代码

    这样子,第一个Vue的程序就运行起来了,如下图:

    4. 参考学习网址

    (1)https://cn.vuejs.org/v2/guide/

    (2) http://www.runoob.com/vue2/vue-tutorial.html

    本文章仅限于对自己学习技术的总结,方便自己能力的提高,写得不好的地方请多谅解。

    相关文章

      网友评论

        本文标题:Vue学习总结之HelloWorld

        本文链接:https://www.haomeiwen.com/subject/amybxftx.html