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 ...
随机推荐
- jQuery插件手把手教会(一)
jQuery插件开发教程 ——让你的jQuery水平提升一个台阶 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台 ...
- Android下在onCreate中获取控件的宽度和高度(通过回调)
有时候需要在onCreate方法中知道某个View组件的宽度和高度等信息, 而直接调用View组件的getWidth().getHeight().getMeasuredWidth().getMeasu ...
- [Ahoi2014]支线剧情[无源汇有下界最小费用可行流]
3876: [Ahoi2014]支线剧情 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1538 Solved: 940[Submit][Statu ...
- 【BZOJ3033】太鼓达人 暴力+欧拉回路
[BZOJ3033]太鼓达人 Description 七夕祭上,Vani牵着cl的手,在明亮的灯光和欢乐的气氛中愉快地穿行.这时,在前面忽然出现了一台太鼓达人机台,而在机台前坐着的是刚刚被精英队伍成员 ...
- R中基本命名(未完)
ls() #查看 rm(list=ls()) #清除内存变量 library() #载入库包 help() #查看帮助文档 head(iris) #查看数据集 class(iris) #查看数据集的类 ...
- Oracle Java Mission Control MBean 服务器 飞行记录器
Oracle Java Mission ControlMBean 服务器飞行记录器
- UNION WHERE
w条件语句的作用域. SELECT * FROM ( SELECT asin, LOWER(country) AS country FROM grab_amzreviews_asins UNION D ...
- puppeteer部署到centOS上出现launch chrome fail的情况
在Mac上调试无问题,放到阿里云上运行会报错. 需要先安装依赖, yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 lib ...
- Spark 源码分析 – BlockManagerMaster&Slave
BlockManagerMaster 只是维护一系列对BlockManagerMasterActor的接口, 所有的都是通过tell和askDriverWithReply从BlockManager ...
- Spring Data之Hello World
1. 概述 SpringData : 注意目标是使数据库的访问变得方便快捷;支持NoSQL和关系数据存储; 支持NoSQL存储: MongoDB(文档数据库) Neo4j(图形数据库) Redis(键 ...