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 ...
随机推荐
- laravel 调试模式及日志配置
1)调试模式和日志的配置都在 config/app.php 配置文件中 2)打开调试模式 'debug' => env('APP_DEBUG', true) 3)laravel的日志默认已经打开 ...
- Linux Kernel 4.7版本发布
导读 在经历了长达一周的惬意假日时光,大神Linus Torvalds宣布面向所有GNU/Linux操作系统发布Linux Kernel 4.7.Linux 4.7内核的研发历经2个多月,自今年5月2 ...
- 三 Android Studio打包EgretApp (SDK选择和下载)
一 设置项目的sdk路径 二 设置项目使用sdk版本 一 设置项目的sdk路径 设置SDK目录 选择你电脑上的sdk路径 二 在项目中设置SDK版本 在项目中设置编译的sdk版本 在SDK Manag ...
- MD5加密算法全解析
转自:http://blog.csdn.net/nzfxx/article/details/51804193 大家好,我们现在来讲解关于加密方面的知识,说到加密我认为不得不提MD5,因为这是一种特殊的 ...
- [LintCode] 第一个错误的代码版本
/** * class VersionControl { * public: * static bool isBadVersion(int k); * } * you can use VersionC ...
- 160330、Mybatis整合Spring
转自csdn文章 http://haohaoxuexi.iteye.com/blog/1843309 Mybatis整合Spring 根据官方的说法,在ibatis3,也就是Mybatis3问世之前, ...
- 160329(一)、在web.xml文件里配置org.springframework.web.context.ContextLoaderListener
Java代码 <!-- 指明spring配置文件在何处 --> <context-param> <param-name>contextConfigLocation& ...
- IT资料常用网址汇总
菜鸟联盟: http://www.runoob.com/ w3c school :https://www.w3cschool.cn/ http://www.w3school.com.cn/w3c/in ...
- Struts2中获取Web元素request、session、application对象的四种方式
我们在学习web编程的时候,一般都是通过requet.session.application(servletcontext)进行一系列相关的操作,request.session.和applicatio ...
- 【Python算法】图与树的实现
邻接列表及其类似结构 对于图结构的实现来说,最直观的方式之一就是使用邻接列表.下面我们来实现一个最简单的:假设现在我们有n个节点,编号分别为0,...,n-1. 然后,每个邻接列表就是一个数字列表,我 ...