1、安装Node.jsnode.js安装包及源码下载地址为:https://nodejs.org/en/download/

2、安装npm,由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功:

  1. $ npm -v
  2. 3.10.8

如果你安装的是旧版本的 npm,可以很容易得通过 npm 命令来升级,命令如下:

  1. npm install npm -g

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了:

  1. cnpm install [name]

3、安装vue-cil,vue-cil是vue的脚手架工具。其模板可以通过 vuejs-templates 来查看。

我们首先,需要安装vue-cil。命令如下:

  1. npm install -g vue-cli

这个命令只需要运行一次就可以了。安装上之后,以后就不用安装了。

下面,我们来用vue-cil构建一个项目。

首先,我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在E:\vue这个目录下面,那么先通过cmd命令进入这个目录,命令如下:

  1. cd vue

进入到目录之后,我们按照下面的代码输入,新建一个自己的vue项目demo01

  1. vue init webpack demo01

输入这个命令之后,会出现一些提示,是什么不用管,一直按回车即可。


如上图所示,就说明我们的项目构建成功了。并且,给出了下面要执行的命令,我们来逐条执行:

  1. cd demo01
  1. cnpm install

(这里用国内的阿里的cnpm安装比较快)

安装完成之后再运行命令:

  1. npm run dev

执行后,CMD命令窗口如图:

说明项目跑起来了,在运行了npm run dev之后,会自动打开一个浏览器窗口,就可以看到实际的效果了。

windows下vue-cli及webpack 构建网站(一)环境安装的更多相关文章

  1. windows下vue.js开发环境搭建教程

    这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中 ...

  2. windows下搭建node.js及npm的工作环境

    近期在研究数据可视化D3框架,决定在windows下搭建一个nodejs及npm的工作环境,在网上查了n篇文章,别管是编译源代码安装也好.还是使用node.msi格式安装包也好,总是有问题.终于,功夫 ...

  3. windows下mongodb基础玩法系列一介绍与安装

    windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...

  4. Windows下,配置VS Code的Java开发环境

    Windows下,配置VS Code的Java开发环境 前言 最近痴迷于VS Code的开发环境配置,原因就在于它的轻巧和免费,还能当一个非常棒的文本编辑器.如果之前你配置过VS Code并且失败了, ...

  5. CentOS 7 下 JDK1.8+Maven+Nginx+MySql+Git+Redis环境安装

    CentOS 7 下 JDK1.8+Maven+Nginx+MySql+Git+Redis环境安装 安装目录准备 新建data目录,用来放下载的软件 mkdir -p /data 切换到该data目录 ...

  6. windows下vue+webpack前端开发环境搭建及nginx部署

    一.开发环境搭建 1.前端框架一般都依赖nodejs,我们首先要安装node.js.请参考http://www.cnblogs.com/wuac/p/6381819.html. 2.由于许多npm的源 ...

  7. windows系统下 VUE cli手脚架环境安装

    1.安装 node.js环境  (cmd命令工具里输入 node -v 检测是否安装成功) 2.安装VUE 全局环境 npm install --global vue-cli (cmd命令工具里面安装 ...

  8. windows下vue项目启动步骤

    原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1 不是ngnix服务器是,忽 ...

  9. Windows下使用Visual Studio Code搭建Go语言环境

    1.安装GO语言   下载地址:    https://golang.org/dl/   Windows下直接运行安装GO语言即可.     安装成功.   安装完毕GO语言后,需要添加GOPATH环 ...

随机推荐

  1. eclipse中jquery.js文件有错误提示…

    eclipse中jquery.js文件有错误提示的解决办法 2013-04-06 19:18 浏览次数:382 由于jquery.js文件进行了压缩,压缩之后的语法eclipse无法完全识别,所以有错 ...

  2. 转:isualvm远程监控Tomcat

    一.Java VisualVM 概述 对于使用命令行远程监控jvm 太麻烦 . 在jdk1.6 中 Oracle 提供了一个新的可视化的. JVM 监控工具 Java VisualVM .jvisua ...

  3. 火狐浏览器httprequest插件添加和使用方法(适用于前后台分离,测试后台接口)

    第一步:打开火狐浏览器工具栏找到添加组件 1.如图1点击添加组件 第二步:添加组件Httprequest 1.如图2,检索Httprequest 2.如图3,将组件添加到火狐浏览器中 3.如图3.5, ...

  4. 51nod 1086【背包·DP】

    思路: 如果体积乘以数量>=W,那么直接用完全背包模型.如果不到的话,用二进制优化就好了. 基础题,感觉这样写很优雅?回去睡觉. #include <bits/stdc++.h> u ...

  5. 前端需要了解的http知识

    一.五层协议1. OSI(Open System Interconnection 开放式系统互联)七层协议 1)应用层 2)表示层 3)会话层 4)传输层 5)网络层 6)数据链接层 7)物理层2. ...

  6. solidity 学习笔记(5)接口

    接口:不用实现方法,仅仅定义方法. pragma solidity ^; contract cat{ //cat实际上实现了接口animalEat,因为他们有相同的方法. string name; f ...

  7. (三)siege的使用

    学习: ELK——http://dockone.io/article/3655 docker——http://www.testclass.net/docker/ Android Monkey压力测试— ...

  8. 剑指Offer的学习笔记(C#篇)-- 包含min函数的栈

    题目描述 定义栈的数据结构,请在该类型中实现一个能够得到栈中所含最小元素的min函数(时间复杂度应为O(1)). 一 . 题目该怎么想 1 . 定义栈的数据结构:实现Push.Pop.Top.Min方 ...

  9. datastream解析

    在EOS的eosiolib模块中有一个datasteam.hpp文件,它几乎实现了所有类型对字节流的转换,是一个非常强大的工具类,在这里对它的做一个简单的提取,也加强一下自己对它的理解.在下面的工程中 ...

  10. VS2015 调试出现无法启动iis express web服务器

    VS2015 调试出现无法启动iis express web服务器 在项目目录下找到.vs文件夹,然后在.vs/config/applicationhost.config找到这个配置文件,删除掉,然后 ...