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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
优化网页之快速的呈现我们的网页
Jun 29 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
js对象的比较
Feb 26 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
网络资源
2006/10/09 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php算法实例分享
2015/07/14 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
2017/06/21 Javascript
vue把输入框的内容添加到页面的实例讲解
2019/11/11 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python中使用中文的方法
2011/02/19 Python
Python httplib模块使用实例
2015/04/11 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Python __slots__的使用方法
2020/11/15 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
影视后期实训报告
2014/11/05 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
同意报考证明
2015/06/17 职场文书
婚宴主持词
2015/06/30 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
python运行脚本文件的三种方法实例
2022/06/25 Python