Vuejs开发环境搭建及热更新【推荐】


Posted in Javascript onSeptember 07, 2018

 Vue.js

Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用,特别适合单页应用的开发。

Vue.js是数据驱动的,它通过一些特殊的语法,将DOM和数据绑定起来,无需手动操作DOM。一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

一、安装NPM

1.1最新稳定版本:

npm install vue

二、命令行工具安装

国内速度慢,使用淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

注意:以后使用npm的地方就替换成cnpm

1、全局安装vue-vli

​    cnpm install -g vue-cli

2、创建一个基于webpack模板的新项目

vue init webpack my-project

输入安装命令后,稍等一会提示输入:

2.1项目项目名称:

2.2项目描述:

2.3作者:

2.4是否使用ESlint:(可以选择不需要,ESlint是一套语法检查工具)

2.5是否需要单元测试:(可以选择不需要)

说明:

       webpack:项目类型,用webpack这套模板进行压缩和打包。

       my-project:项目名称。

3、安装依赖

3.1进入项目:

cd my-project

3.2安装依赖:

cnpm install

说明:

3.2.1会将依赖安装到项目node_modules文件夹中。

3.2.2可以使用cnpm命令,是因为webpack安装好了相应依赖。

3.2.3 Package.json文件说明:

             主要包含:项目描述、相关依赖。

3.3运行项目:

cnpm run dev 

通过访问http://127.0.0.1:8080访问运行起来的项目。

三、参考链接

Vuejs官网:https://cn.vuejs.org/v2/guide/installation.html

Taobao镜像:http://npm.taobao.org/

总结

以上所述是小编给大家介绍的Vuejs开发环境搭建及热更新,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
Vue自定义指令使用方法详解
Aug 21 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
vue选项卡切换的实现案例
Apr 11 Vue.js
小程序点赞收藏功能的实现代码示例
Sep 07 #Javascript
前端防止用户重复提交js实现代码示例
Sep 07 #Javascript
vue实现打印功能的两种方法
Sep 07 #Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 #Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 #Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 #Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 #Javascript
You might like
目录,文件操作详谈―PHP
2006/11/25 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
javascript 写类方式之五
2009/07/05 Javascript
javascript获取当前日期时间及其它操作函数
2011/01/11 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
python正则表达式re模块详解
2014/06/25 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
银行求职信个人范文
2013/12/16 职场文书
厂长助理岗位职责
2013/12/27 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
2014年党课学习材料
2014/05/11 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
HTML基础详解(下)
2021/10/16 HTML / CSS
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript