一、安装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开发环境搭建及热更新的更多相关文章

  1. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  2. vuejs开发环境搭建

    前言:现在前端最火的是3个框架:react,vue,angular.可以说着是哪个框架大大改变了前端的地位.相对于angular来说.vue同样拥有丰富的指令,并且都是典型的MVC框架,但是vue比较 ...

  3. webpack 环境搭建+实现热更新

    让我们一起构建一个小的app 为了便于你更好的了解Webpack带来的好处,我们将会构建一个非常小的app并将资源文件打包.在这个教程中我推荐基于Node4或Node5和NPM3来进行开发,这样就避免 ...

  4. 搭建带热更新功能的本地开发node server

    引言 使用webpack有一段时间了,对其中的热更新的大概理解是:对某个模块做了修改,页面只做局部更新而不需要刷新整个页面来进行更新.这样就能节省因为整个页面刷新所产生开销的时间,模块热加载加快了开发 ...

  5. VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染

    VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章,自己也根据它进行搭建环境. 文章地址:vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行 ...

  6. Vuejs开发环境的搭建

    Windows系统上搭建VueJS开发环境 1.安装node.js:在node.js官网下载对应系统的msi包并安装 注:node的安装分全局和本地模式.一般情况下会以本地模式运行,包会被安装到和你的 ...

  7. 我的vim开发环境搭建:C/C++/Go,持续更新中

    懒得在github博客上折腾评论功能,先借用博客园推广下,虽然好像也没什么用. 我的vim开发环境搭建(1): 准备工作 我的vim开发环境搭建(2): 常用的vim插件 我的vim开发环境搭建(3) ...

  8. TypeScript完全解读(26课时)_1.TypeScript完全解读-开发环境搭建

    1.TypeScript完全解读-开发环境搭建 初始化项目 手动创建文件夹 D:\MyDemos\tsDemo\client-demo 用VSCode打开 npm init:初始化项目 然后我们的项目 ...

  9. Flutter--Flutter开发环境搭建

    一.前言 Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,一套代码同时运行在 iOS 和 Android平台. Fl ...

随机推荐

  1. cocos中lua使用shader实例

    local prog = cc.GLProgram:create("res/shader/light2d.vsh","res/shader/light2d.fsh&quo ...

  2. boost::lexical_cast

    boost::lexical_cast为数值之间的转换(conversion)提供了一揽子方案,比如:将一个字符串"转换成整数123,代码如下: "; int a = lexica ...

  3. Java switch 详解

    switch 语句由一个控制表达式和多个case标签组成. switch 控制表达式支持的类型有byte.short.char.int.enum(Java 5).String(Java 7). swi ...

  4. 第九课——redis集群

    第九课时作业 静哥 by 2016.4.18~2016.4.25 1.节点 (1)节点概念:一个节点就是redis集群里的一台redis服务器.一个redis集群是由多个节点(node)组成,最初每个 ...

  5. Exchange OAB(Offline Address Book)

    If Outlook is left running constantly in Cached Exchange Mode, it updates the Offline Address Book a ...

  6. Javascript 香港身份证号校验

    <!DOCTYPE html> <html> <head> <title>香港身份证校验码计算</title> </head> ...

  7. Android logcat详细用法

      admin| 2011-10-29 11:16| 分类:学习文档| Android logcat | 评论:[0]| Android日志系统提供了记录和查看系统调试信息的功能.日志都是从各种软件和 ...

  8. flask中的blueprint

    https://blog.csdn.net/sunhuaqiang1/article/details/72803336

  9. 【JVM】线上应用故障排查

    高CPU占用 一个应用占用CPU很高,除了确实是计算密集型应用之外,通常原因都是出现了死循环. 根据top命令,发现PID为28555的Java进程占用CPU高达200%,出现故障. 通过ps aux ...

  10. ubuntu下30天自制os 的学习计划

    30天自制os的学习也告一段落,由于有其他更重要的事情要集中精力去处理.书本从15天開始就是多任务了.可是不得不停下一阵子. 以下总结下学习中遇到的一些问题. 1:学习这前14天中.问题最大的是关于G ...