windows下vue-cli及webpack 构建网站(一)环境安装
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
输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。
如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:
- cd demo01
- cnpm install
(这里用国内的阿里的cnpm安装比较快)
安装完成之后再运行命令:
- npm run dev
执行后,CMD命令窗口如图:
说明项目跑起来了,在运行了npm run dev
之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。
windows下vue-cli及webpack 构建网站(一)环境安装的更多相关文章
- windows下vue.js开发环境搭建教程
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...
- windows下搭建node.js及npm的工作环境
近期在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源代码安装也好.还是使用node.msi格式安装包也好,总是有问题.终于,功夫 ...
- windows下mongodb基础玩法系列一介绍与安装
windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...
- Windows下,配置VS Code的Java开发环境
Windows下,配置VS Code的Java开发环境 前言 最近痴迷于VS Code的开发环境配置,原因就在于它的轻巧和免费,还能当一个非常棒的文本编辑器.如果之前你配置过VS Code并且失败了, ...
- CentOS 7 下 JDK1.8+Maven+Nginx+MySql+Git+Redis环境安装
CentOS 7 下 JDK1.8+Maven+Nginx+MySql+Git+Redis环境安装 安装目录准备 新建data目录,用来放下载的软件 mkdir -p /data 切换到该data目录 ...
- windows下vue+webpack前端开发环境搭建及nginx部署
一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...
- windows系统下 VUE cli手脚架环境安装
1.安装 node.js环境 (cmd命令工具里输入 node -v 检测是否安装成功) 2.安装VUE 全局环境 npm install --global vue-cli (cmd命令工具里面安装 ...
- windows下vue项目启动步骤
原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1 不是ngnix服务器是,忽 ...
- Windows下使用Visual Studio Code搭建Go语言环境
1.安装GO语言 下载地址: https://golang.org/dl/ Windows下直接运行安装GO语言即可. 安装成功. 安装完毕GO语言后,需要添加GOPATH环 ...
随机推荐
- js避免命名冲突
[1]工程师甲编写功能A var a = 1; var b = 2; alert(a+b); [2]工程师乙添加新功能B var a = 2; var b = 1; alert(a-b); [3]上一 ...
- 【244】◀▶IEW-Unit09
Unit 9 Food 1)Model1题目及范文讲解 In the world today, there is a problem with food production. As a result ...
- Umbraco back office 登录不了,如何解决
通过设置User的默认密码为"default", 它的Hash值为 bnWxWyFdCueCcKrqniYK9iAS+7E= 所以在SQL Server中执行以下脚本 UPDATE ...
- SQL Server等待事件新解
资源等待类型 并行:CXPACKET Buffer:PAGEIOLATCH_X 非Buffer:LATCH_X I/O:ASYNC_IO_COMPITION:IO_COMPITION CPU:SOS_ ...
- 《剑指offer》面试题8—旋转数组的最小数字
题目:把一个数组最开始的若干个元素搬到数组末尾我们称之为数组的旋转.要求:输入一个递增排序的数组的旋转,输出旋转数组中的最小数字.例如{3,4,5,1,2}是{1,2,3,4,5}的一个旋转,该数组的 ...
- Git 时光穿梭鸡 管理修改
Git跟踪并管理的是修改,而非文件. 什么是修改? 比如你新增了一行,这就是一个修改, 删除了一行,也是一个修改, 更改了某些字符,也是一个修改, 删了一些又加了一些,也是一个修改, 甚至创建一个新文 ...
- 剑指Offer的学习笔记(C#篇)-- 树的子结构
题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 一 . 二叉树的概念 树形结构是一种典型的非线性结构,除了用于表示相邻关系外,还可 ...
- 微信小程序请求openid错误码40163
通过wx.login({})方法获取到的code只能使用一次,如果需要在哎服务器端再次请求获取openid来进行校验,需要再次通过wx.login({})方法获取code 否则会报错误代码40163, ...
- 黑马旅游网案例 Bug集锦
- ubuntu 设置字符集 locale(解决乱码问题)
1.locale 查看现在的locale配置环境 2.localepurge 配置需要的locale(如果没有这个命令,用apt-get install localepurge安装) 3.locale ...