一、安装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. SG函数入门

    sg[i]为0表示i节点先手必败. 首先定义mex(minimal excludant)运算,这是施加于一个集合的运算,表示最小的不属于这个集合的非负整数.例如mex{0,1,2,4}=3.mex{2 ...

  2. IE edge是怎么了??

    IE edge 怎么不能通过$.getJSON(url,function(data){ alert(''); });获取数据呢?,其他浏览器和IE的10以下版本都没问题获取到了,这是什么情况!本来是想 ...

  3. Ubuntu 16.04 安装 Gnome 桌面环境

    个人博客链接:Ubuntu 16.04 安装 Gnome 桌面环境

  4. PHP疑难杂症

    下面这种写法是否允许? echo '\n' // \n echo "\n" // 输出换行 直接访问对象不存在的属性,会怎样? $o = new stdClass(); echo ...

  5. Python全栈day14(集合)

    一,集合 1,集合由不同元素组成 2,无序 3,集合中元素必须是不可变类型 二,定义集合 1,s = {1,2,3,4,5} 2,s = set(hello)以迭代的方式生成集合 s = set(&q ...

  6. PAT 甲级 1021 Deepest Root (并查集,树的遍历)

    1021. Deepest Root (25) 时间限制 1500 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue A graph ...

  7. NoSQL 常用资源

    Hadoop:http://www.apache.org/dyn/closer.cgi/hadoop/common/ easyhadoop:https://github.com/xianglei/ea ...

  8. Python3中json的encode和decode

    在Python3中,将对象序列化为JSON对象,即对对象进行json encode编码,使用函数 json.dumps(obj, *, skipkeys=False, ensure_ascii=Tru ...

  9. SpringBoot 之数据访问

    1. Spring Boot 与 JDBC 默认使用 org.apache.tomcat.jdbc.pool.DataSource 数据源; // application.yml spring: da ...

  10. 3类数据库的联动:mysql、mongodb、redis

    3类数据库的联动:mysql.mongodb.redis from pymysql import * from pymongo import * from redis import * class M ...