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 相关文章推荐
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
小程序点赞收藏功能的实现代码示例
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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP session_start()问题解疑(详细介绍)
2013/07/05 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
2019/11/01 jQuery
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
python中私有函数调用方法解密
2016/04/29 Python
Python字符串处理实现单词反转
2017/06/14 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
Python API自动化框架总结
2019/11/12 Python
Django中modelform组件实例用法总结
2020/02/10 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
考博专家推荐信
2014/05/10 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
数学教师个人工作总结
2015/02/06 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers