超简单的Vue.js环境搭建教程


Posted in Javascript onMarch 17, 2017

vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下)

1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等。

这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像:
输入npm install -g cnpm ?registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

安装完npm镜像后,开始安装全局vue-cli脚手架,之所以要用vue-cli,是应为这个工具能帮我们搭建好我们需要的模板框架,比较简单。方法:cnpm install -g vue-cli 回车,验证是否安装成功,在命令行中输入vue,出来vue的信息说明---安装成功

2.安装完脚手架以后开始,开始创建一个新项目:命令 vue init webpack vue_project(最后这个是我创建的项目文件夹的名字)

过程中会出现 

超简单的Vue.js环境搭建教程

3 cd vue_project

安装依赖,生成node_modules目录(安装依赖的代码库)

npm install=>会生成这个文件夹node_modules(注:当我们把用vue-cli脚手架搭建成的vue项目复制到其他地方时,要把node_modules目录删除,不然在其他地方无法执行cnpm run dev,这其中设计到路径的问题。删除之后要重新cnpm install)

npm run dev  准备工作做好以后,测试一下项目里面默认的app.vue模块能否跑起来,这是需要先安装一下服务器环境,在命令行中或者输入运行”npm run dev”的时候执行的是build/dev-server.js文件,运行”npm run build”的时候执行(用来执行发布的)的是build/build.js文件,我们可以从这两个文件开始进行代码阅读分析。

Devdeendencies是表示我们编译过程的一些依赖。

Readme文件:项目的描述文件

每个组件分为三个部分:模板、逻辑、样式

cnpm run dev 回车即可 ,就会打开浏览器http://localhost:8080 

应用场景:

针对具有复杂交互逻辑的前端应用;

它可以提供基础的架构抽象;

可以通过AJAX数据持久化,保证前端用户体验。

好处:

当前端和数据做一些操作的时候,可以通过AJAX请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景,刷新页面太昂贵,会重新加载很多资源,虽然有些会被缓存,但是页面的DOM,JS,CSS都会被页面重新解析一遍,因此移动端页面通常会做出SPA单页应用。

Vue.js的特点:MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
vue.js学习之递归组件
Dec 13 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 16 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
Vue.js开发环境快速搭建教程
Mar 17 #Javascript
原生js编写2048小游戏
Mar 17 #Javascript
vue.js开发环境安装教程
Mar 17 #Javascript
jquery 手势密码插件
Mar 17 #Javascript
vue2.0结合DataTable插件实现表格动态刷新的方法详解
Mar 17 #Javascript
AngularJS路由切换实现方法分析
Mar 17 #Javascript
js判断是否是手机页面
Mar 17 #Javascript
You might like
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
javascript 面向对象 function类
2010/05/13 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
javascript每日必学之多态
2016/02/23 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
python字符串的方法与操作大全
2018/01/30 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
物流经理自我评价
2013/09/23 职场文书
党校自我鉴定范文
2013/10/02 职场文书
培训心得体会
2013/12/29 职场文书
新学期开学寄语
2014/01/18 职场文书
党支部综合考察意见
2015/06/01 职场文书
2015年女工委工作总结
2015/07/27 职场文书
改进工作作风心得体会
2016/01/23 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android
vue elementUI批量上传文件
2022/04/26 Vue.js