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 相关文章推荐
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
Vue动态实现评分效果
May 24 Javascript
Vue 中批量下载文件并打包的示例代码
Nov 20 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
Webpack5正式发布,有哪些新特性
Oct 12 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
PHP延迟静态绑定示例分享
2014/06/22 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JS正则验证邮箱的格式详细介绍
2013/11/19 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
简单介绍Python中的floor()方法
2015/05/15 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python爬取成语接龙类网站
2018/10/19 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
python如何爬取网页中的文字
2020/07/28 Python
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
婚前保证书
2014/04/29 职场文书
小学语文教研活动总结
2014/07/01 职场文书
小学综治宣传月活动总结
2014/07/02 职场文书
售房协议书范本2014
2014/10/23 职场文书
工会文体活动总结
2015/05/07 职场文书
离职信范文
2015/06/23 职场文书
python 如何执行控制台命令与操作剪切板
2021/05/20 Python
学习nginx基础知识
2021/09/04 Servers