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 相关文章推荐
IE和Mozilla的兼容性汇总event
Aug 12 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
js闭包学习心得总结
Apr 17 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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程序员面试 切忌急功近利(更需要注重以后的发展)
2010/09/01 PHP
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
PHP中->和=>的含义及使用示例解析
2020/08/06 PHP
prototype1.4中文手册
2006/09/22 Javascript
JAVASCRIPT HashTable
2007/01/22 Javascript
jquery中通过过滤器获取表单元素的实现代码
2011/07/05 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
python MySQLdb使用教程详解
2018/03/20 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python 负数取模运算实例
2020/06/03 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
黄河的主人教学反思
2014/02/07 职场文书
预备党员个人总结
2015/02/14 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers