当前栏目
包学会之浅入浅出Vue.js:入门篇
2016年,乃至接下来整个2017年,如果你要问前端技术框架什么最火,那无疑就是前端三巨头:React、Angular、Vue。没错,什么jQuery,seaJs,gulp等都逐渐脱离了热点。面试的时候不吹上一点新技术,好像自己就不是搞前端的似的。当然,希望大家都是抱着好学的心来开始一门学艺的,不管怎样,求求你,请接着看下去吧~
什么是Vue.js
不管你想不想了解,你只需要大概知道,Vue就是和jQuery一样是一个前端框架,它的中心思想就是数据驱动,像远古时代的老前辈jQuery是结构驱动,什么意思呢,以前我们写代码时常用$('.dom').text
('我把值改变了'),这种写法先要获得结构,然后再修改数据更新结构,而Vue的做法直接就是this.msg
="我改变了",然后msg就会同步到某个结构上,视图管理抽象为数据管理,而不是管理dom结构了。不懂没关系,慢慢来。
还有一点必须要知道的是,Vue是国人写的,技术文档也妥妥的是中文,想到这我就有学习的动力。
搭建环境
工欲善其事必先利其器,我们的学习计划从学会搭建Vue所需要的环境开始,node和npm的环境不用说是必须的,现在前端流程化很热门,基本上新的技术都会在这套流程的基础上做开发,我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和npm了,那我们就只需要执行以下命令:
$ npm install -g vue-cli
构建完了之后,随便进入一个我们事先准备好的目录,比如demo目录,然后在目录中做初始化操作:
$ vue init webpack myProject
webpack参数是指myProject这个项目将会在开发和完成阶段帮你自动打包代码,比如将js文件统一合成一个文件,将CSS文件统一合并压缩等。要是不知道webpack的话,建议先了解下为好,当然不了解也不影响我们接着往下走。
init的过程中会问你给项目定义一些描述,版本之类的信息,可以不管,一直输入y确定跳过,完成之后出现以下界面,红框部分会提示你接下来要做的操作,按照它的提示继续敲代码就对了。
cd myProject npm install npm run dev
npm install 是安装项目所需要的依赖,简单理解就是安装一些必要的插件,需要等一段时间;
npm run dev 是开始执行我们的项目了,一旦执行这个命令之后,等一小会,浏览器应该会自动帮你打开一个tab为http://localhost:8080/#/
的链接,这个链接就是我们本地开发的项目主页了,如果没有,说明出错了。请移步到评论区回复吧。。。
(PS:开发完成后执行npm run build会编译我们的源代码生成最终的发布代码,在dist目录下)
相关文章
- JavaScript快速入门
- 初识jQuery
- 关于JavaScript0.1+0.2=?浮点数精度问题
- NanoDet:这是个小于4M超轻量目标检测模型
- JavaScript回调函数的高手指南
- 前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法
- Python基础之模块:3、os模块 sys模块 json模块 json实战
- filebeat收集日志到elsticsearch中并使用ingest node的pipeline处理
- 技巧收藏|10个JavaScript常用数组操作方法
- 即使不会node.js,拖拽就可完成数据的可视化展示
- 如何使用Node.js连接数据库
- 解决aspnetcore-browser-refresh.js:234 WebSocket connection to 'wss://localhost:62356/Admin/' failed问题
- APIJSON-实现一对一,一对多复杂查询
- APIJSON - 功能符、数组关键词、对象关键词、全局关键词简表速查
- 用Three.js构建三维世界的房子
- 手把手教你发布兼容TS的JS库到npmjs上
- POSTGRESQL 15 日志的JSON 格式 为什么用JSON 与 PG 14 没有注意的一些参数
- Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
- JS常见加密 AES、DES、RSA、MD5、SHAI、HMAC、Base64(编码) - Python/JS实现
- JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用