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环 ...
随机推荐
- eclipse中jquery.js文件有错误提示…
eclipse中jquery.js文件有错误提示的解决办法 2013-04-06 19:18 浏览次数:382 由于jquery.js文件进行了压缩,压缩之后的语法eclipse无法完全识别,所以有错 ...
- 转:isualvm远程监控Tomcat
一.Java VisualVM 概述 对于使用命令行远程监控jvm 太麻烦 . 在jdk1.6 中 Oracle 提供了一个新的可视化的. JVM 监控工具 Java VisualVM .jvisua ...
- 火狐浏览器httprequest插件添加和使用方法(适用于前后台分离,测试后台接口)
第一步:打开火狐浏览器工具栏找到添加组件 1.如图1点击添加组件 第二步:添加组件Httprequest 1.如图2,检索Httprequest 2.如图3,将组件添加到火狐浏览器中 3.如图3.5, ...
- 51nod 1086【背包·DP】
思路: 如果体积乘以数量>=W,那么直接用完全背包模型.如果不到的话,用二进制优化就好了. 基础题,感觉这样写很优雅?回去睡觉. #include <bits/stdc++.h> u ...
- 前端需要了解的http知识
一.五层协议1. OSI(Open System Interconnection 开放式系统互联)七层协议 1)应用层 2)表示层 3)会话层 4)传输层 5)网络层 6)数据链接层 7)物理层2. ...
- solidity 学习笔记(5)接口
接口:不用实现方法,仅仅定义方法. pragma solidity ^; contract cat{ //cat实际上实现了接口animalEat,因为他们有相同的方法. string name; f ...
- (三)siege的使用
学习: ELK——http://dockone.io/article/3655 docker——http://www.testclass.net/docker/ Android Monkey压力测试— ...
- 剑指Offer的学习笔记(C#篇)-- 包含min函数的栈
题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 一 . 题目该怎么想 1 . 定义栈的数据结构:实现Push.Pop.Top.Min方 ...
- datastream解析
在EOS的eosiolib模块中有一个datasteam.hpp文件,它几乎实现了所有类型对字节流的转换,是一个非常强大的工具类,在这里对它的做一个简单的提取,也加强一下自己对它的理解.在下面的工程中 ...
- VS2015 调试出现无法启动iis express web服务器
VS2015 调试出现无法启动iis express web服务器 在项目目录下找到.vs文件夹,然后在.vs/config/applicationhost.config找到这个配置文件,删除掉,然后 ...