windows下vue-cli及webpack搭建安装环境


Posted in Javascript onApril 25, 2017

1、安装Node.js,node.js安装包及源码下载地址为:https://nodejs.org/en/download/。

2、安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功:

$ npm -v 
3.10.8

如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下:

npm install npm -g

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了:

cnpm install [name]

3、安装vue-cil,vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。

我们首先,需要安装vue-cil。命令如下:

npm install -g vue-cli

这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。

下面,我们来用vue-cil构建一个项目。

首先,我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在E:\vue这个目录下面,那么先通过cmd命令进入这个目录,命令如下:

cd vue

进入到目录之后,我们按照下面的代码输入,新建一个自己的vue项目demo01

vue init webpack demo01

输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。

windows下vue-cli及webpack搭建安装环境

如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:

cd demo01
cnpm install

(这里用国内的阿里的cnpm安装比较快)

windows下vue-cli及webpack搭建安装环境

安装完成之后再运行命令:

npm run dev

执行后,CMD命令窗口如图:

windows下vue-cli及webpack搭建安装环境

说明项目跑起来了,在运行了npm run dev之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。

windows下vue-cli及webpack搭建安装环境

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
jquery遍历checkbox介绍
Feb 21 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
JS设计模式之策略模式概念与用法分析
Feb 05 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 #Javascript
vuejs如何配置less
Apr 25 #Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 #Javascript
微信小程序中显示html格式内容的方法
Apr 25 #Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 #Javascript
详解Vue 动态添加模板的几种方法
Apr 25 #Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 #Javascript
You might like
一个用php实现的获取URL信息的类
2007/01/02 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
教师实习自我鉴定
2013/12/13 职场文书
商务助理求职信范文
2014/04/20 职场文书
实验心得体会
2014/09/05 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
详解JS数组方法
2021/11/20 Javascript