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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
一段批量给页面上的控件赋值js
Jun 19 Javascript
window.location.hash 使用说明
Nov 08 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
AngularGauge 属性解析详解
Sep 06 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
Vue 中使用 CSS Modules优雅方法
Apr 09 Javascript
Node 升级到最新稳定版的方法分享
May 17 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 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中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php文件下载处理方法分析
2015/04/22 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
2018/03/12 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
python画图常规设置方式
2020/03/05 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
海淘母婴商城:国际妈咪
2016/07/23 全球购物
会计找工作求职信范文
2013/12/09 职场文书
对照检查剖析材料
2014/09/30 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
龙门石窟导游词
2015/02/02 职场文书
Mysql 如何查询时间段交集
2021/06/08 MySQL