Vuejs开发环境搭建及热更新
一、安装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开发环境搭建及热更新的更多相关文章
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
- vuejs开发环境搭建
前言:现在前端最火的是3个框架:react,vue,angular.可以说着是哪个框架大大改变了前端的地位.相对于angular来说.vue同样拥有丰富的指令,并且都是典型的MVC框架,但是vue比较 ...
- webpack 环境搭建+实现热更新
让我们一起构建一个小的app 为了便于你更好的了解Webpack带来的好处,我们将会构建一个非常小的app并将资源文件打包.在这个教程中我推荐基于Node4或Node5和NPM3来进行开发,这样就避免 ...
- 搭建带热更新功能的本地开发node server
引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...
- VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染
VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 文章地址:vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行 ...
- Vuejs开发环境的搭建
Windows系统上搭建VueJS开发环境 1.安装node.js:在node.js官网下载对应系统的msi包并安装 注:node的安装分全局和本地模式.一般情况下会以本地模式运行,包会被安装到和你的 ...
- 我的vim开发环境搭建:C/C++/Go,持续更新中
懒得在github博客上折腾评论功能,先借用博客园推广下,虽然好像也没什么用. 我的vim开发环境搭建(1): 准备工作 我的vim开发环境搭建(2): 常用的vim插件 我的vim开发环境搭建(3) ...
- TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建
1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...
- Flutter--Flutter开发环境搭建
一.前言 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台. Fl ...
随机推荐
- 三 Android Studio打包EgretApp (SDK选择和下载)
一 设置项目的sdk路径 二 设置项目使用sdk版本 一 设置项目的sdk路径 设置SDK目录 选择你电脑上的sdk路径 二 在项目中设置SDK版本 在项目中设置编译的sdk版本 在SDK Manag ...
- html的table列表根据奇数还是偶数行显示不同颜色
<tr <s:if test="#sts.even"> class="table_1" onMouseOut="this.class ...
- MyBatis笔记——EhCache二级缓存
介绍 ehcache是一个分布式缓存框架. 我们系统为了提高系统并发,性能.一般对系统进行分布式部署(集群部署方式) 不使用分布缓存,缓存的数据在各各服务单独存储,不方便系统开发.所以要使用分布式缓 ...
- quartz 防止上一任务未执行完毕,下一时间点重复执行
/** * 订单监控类 * 定时扫描所有待付款订单,超时自动取消 * Created by huangbaidong * 2017/3/29. */ @Component public class O ...
- 【转】SignalR来做实时Web聊天
本章和大家分享的内容是使用Signal R框架创建个简易的群聊功能,主要讲解如何在.Net的MVC中使用这个框架,由于这个项目有官方文档(当然全英文),后面也不打算写分享篇了,主要目的是让朋友们在需要 ...
- LeetCode_链表操作1—Swap Nodes in Pairs
Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2-& ...
- Django自定义模板函数
Django自定义模板函数 https://www.cnblogs.com/SunsetSunrise/p/7680491.html 在django中新建一个应用:listpage在listpage中 ...
- ui-select : There is no "X"(delete button) with selectize theme, when allow-clear="true"
but add allow-clear="true"For Bootstrap and Select2 themes, it's working perfectly. reason ...
- 从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型
这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,D ...
- Uboot命令U_BOOT_CMD
转载:http://blog.csdn.net/shengzhadon/article/details/52766263 U_BOOT_CMD是一个宏定义,具体功能是定义一个struct cmd_tb ...