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 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 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教程 插件机制在PHP中实现方案
2012/11/02 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
Smarty模板语法详解
2019/07/20 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
关于捕获用户何时点击window.onbeforeunload的取消事件
2011/03/06 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
vue中activated的用法
2021/01/03 Vue.js
Python中map和列表推导效率比较实例分析
2015/06/17 Python
Python实现的矩阵类实例
2017/08/22 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
如何利用cmp命令比较文件
2016/04/11 面试题
销售代表求职自荐信
2013/10/01 职场文书
小学班主任寄语大全
2014/04/04 职场文书
材料物理专业求职信
2014/09/01 职场文书
房屋租赁协议书
2014/10/18 职场文书
大学生村官个人总结
2015/02/15 职场文书
恰同学少年观后感
2015/06/08 职场文书
工作表现证明
2015/06/15 职场文书
《静夜思》教学反思
2016/02/17 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
vue特效之翻牌动画
2022/04/20 Vue.js