一、安装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. 【BZOJ4275】[ONTAK2015]Badania naukowe DP

    [BZOJ4275][ONTAK2015]Badania naukowe Description 给定三个数字串A,B,C,请找到一个A,B的最长公共子序列,满足C是该子序列的子串. Input 第一 ...

  2. 【BZOJ1412】[ZJOI2009]狼和羊的故事 最小割

    [BZOJ1412][ZJOI2009]狼和羊的故事 Description “狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向......” Orez听到这首歌,心想: ...

  3. java面向对象、构造方法 之内部类

    UML类图 UML  Unified Modeling Language (UML)又称统一建模语言或标准建模语言 在一个类中      属性表示这类事物的性质(描述它的数据)      方法表示这类 ...

  4. Oracle涂抹oracle学习笔记第9章RMAN说,我能恢复

    RMAN中的恢复对应两个操作:数据库修复(restore)和数据库恢复(recover) 数据库修复(restore):是指利用备份集的数据文件来替换已经损坏的数据库文件或者将其恢复到一个新的位置.R ...

  5. CH5105 Cookies【贪心】【线性dp】

    5105 Cookies 0x50「动态规划」例题 描述 圣诞老人共有M个饼干,准备全部分给N个孩子.每个孩子有一个贪婪度,第 i 个孩子的贪婪度为 g[i].如果有 a[i] 个孩子拿到的饼干数比第 ...

  6. 【Python Programe】使用Python发送语音验证

    使用Python向手机发送语音验证码,需要工具有: virtualenv 创建独立运行环境 Twilio 帐号去调用相应的API Twilio 的python库,5.7.0版本 1.使用 virtua ...

  7. 针对Quant的Python快速入门指南

    作者:用Python的交易员 (原创文章,转载请注明出处) 最近有越来越多的朋友在知乎或者QQ上问我如何学习入门Python,就目前需求来看,我需要写这么一篇指南. 针对整个vn.py框架的学习,整体 ...

  8. Linux/Mac里复制终端Session(像SecureCRT一样)

    在你的登录账户下的.ssh文件夹新建一个文件:config cd ~/.ssh config的文件中,内容为: host * ControlMaster auto ControlPath ~/.ssh ...

  9. python基础-第五篇-5.3装饰器

    小白发呆的看着窗外,同事们陆陆续续的地来到公司,想起算法,小白就飘飘然了.突然后面传来一声呼唤,原来是小刘! 小刘:不好意思啊!堵车了,就来晚了点,不耽误你的时间,咱们就开启的今天的培训内容吧! 小白 ...

  10. Python中的高级数据结构(转)

    add by zhj: Python中的高级数据结构 数据结构 数据结构的概念很好理解,就是用来将数据组织在一起的结构.换句话说,数据结构是用来存储一系列关联数据的东西.在Python中有四种内建的数 ...