windows下vue-cli及webpack 构建网站(一)环境安装

最新推荐文章于 2024-08-09 19:22:24 发布
最新推荐文章于 2024-08-09 19:22:24 发布
阅读量2.3w 收藏 11
点赞数 3
分类专栏： node.js vue.js 文章标签： vue wabpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ansu2009/article/details/53261410
版权
本文介绍了在Windows环境下如何一步步安装Node.js、npm，以及使用vue-cli构建Vue项目。首先从Node.js的下载与安装开始，然后验证npm是否成功安装。接着，通过命令行工具全局安装vue-cli，创建新项目，并将目录定位到项目文件夹。最后，执行相关命令启动项目，当浏览器显示项目效果时，表明项目已成功搭建。
摘要由CSDN通过智能技术生成

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

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

$ npm -v
3.10.8
如果你安装的是旧版本的 npm，可以很容易得通过 npm 命令来升级，命令如下：

最低0.47元/天 解锁文章
安树
关注
专栏目录
在windows安装webpack
Caeser110的博客
09-19 605
前言 在学前端开发，需要安装npm和webpack，遇到很多坑，其实也不算是坑吧，只是没开发过前端，所以有点懵，现在可以了，我想记录一下。 官网下载nodejs 链接：https://pan.baidu.com/s/112FORLURYOimSUfuXhMq0w 提取码：2vut 复制这段内容后打开百度网盘手机App，操作更方便哦 双击安装之后，一路下一步即可 在nodejs安装路径下新建两个...
Windows下安装Vue
踏雪无痕
05-10 3510
一.下载安装包 前往Node.js官网下载：添加链接描述 下载如下： 双击执行安装，指定安装路径： 默认按安装全部组件： 安装成功： 二.设置nodejs prefix（全局）和cache（缓存）路径 1.在nodejs安装路径下，新建node_global和node_cache两个文件夹 2.设置缓存文件路径和全局模块存放路径 三.基于 Node.js 安装cnpm（淘宝镜像） 四.设置环境变量 设置环境变量可以使得在任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径 1.鼠标
Vue环境配置（Windows）
最新发布
qq_63978748的博客
08-09 1019
PS：cnpm是由淘宝NPM镜像提供的一个npm的镜像服务客户端，用于在中国大陆地区加速npm包的安装，因为直接使用npm在国内有时候会比较慢。它使用了Vue团队推荐的最新项目模板，提供了一种无需全局安装Vue CLI的方式来创建Vue项目，更加简单快捷。vue的使用需要以node.js为前提，如果您的电脑上已经安装了node.js，可直接跳过这一步。现在，你就成功创建了一个你自己的Vue项目模板， 你可以按照自己的想法对各个模块进行修改。初次创建时，会询问我们是否下载对应的依赖项，我们输入y后回车即可。
Windows下安装vue开发环境
一只小木头的博客
10-19 592
windows下安装vue开发环境 1、安装npm 官网node进行下载 Node.js 是一个开源与跨平台的JavaScript 运行时环境。 2、检测nodejs安装 当执行完上步安装包安装后，需要进行安装是否成功，win+r打开运行，输入cmd后进入命令行界面。分别输入node -v和npm -v命令进行node的版本号和npm的版本号的查看。 安装完后的目录如下图所示 3、配置npm安装全局模块路径与缓存路径 NPM是随同NodeJS一起安装的包管理工具 一般，在进行npm install
windows安装webpack
大米666的博客
09-05 503
1.创建webpack文件夹 2.从cmd进入文件夹，用 npm init 命令进行初始化 3.输入 npm install webpack –save-dev 命令进行安装
window下安装Vue.js
qq_27552077的博客
03-16 2636
遇到各路坑货的安装教程之后我终于成功安装了，接下来分享一下如何在window下安装吧！先说一下大概思路：Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。然后nodejs里面自带有npm了，待会可以通过npm安装一些命令行工具。 一、安装nodejs 下载地址：https://nodejs.org/en/downlo
Windows下--VUE安装
白舟的博客
08-10 578
**安装VUE前得先把node.js安装好， 安装完node.js之后，npm也会自动安装** ** 一，在文件夹中建立一个project ** 在此文件夹下进入cmd检查node.js是否安装好 命令：node -V npm -V 二. 全局安装脚手架工具vue-cli 命令：npm install --global vue-cli 三. vue项目初始化命令如下，若没有安装webpack，则先安装webpack npm install -g webpack vue init
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
12-12
windows下vue-cli及webpack 构建网站(一)环境安装  windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件  1、本篇文章是建立在以上三篇文章的基础上的...
详解windows下vue-cli及webpack 构建网站(三)使用组件
01-19
1、本文章是建立在《windows下vue-cli及webpack 构建网站(一)环境安装》和《windows下vue-cli及webpack 构建网站(一)导入bootstrap样式》两篇文章之上的。 2、在src\components文件夹下面新建两个组件，分别为 ...
windows下vue-cli及webpack搭建安装环境
08-30
Windows 下 Vue-cli 及 Webpack 搭建安装环境 在现代 Web 开发中，Vue-cli 和 Webpack 是两个非常重要的工具，前者是 Vue.js 的脚手架工具，可以快速构建 Vue 项目，而后者是目前最流行的模块打包工具。本文将详细...
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
08-30
首先确保你已经安装了vue-cli，如果没有，你可以参照《windows下vue-cli及webpack 构建网站(一)环境安装》进行设置。 1. **安装Bootstrap** 在你的Vue项目中引入Bootstrap，你需要通过npm来安装Bootstrap及其CSS和...
03慕课网《vue.js2.5入门》——Vue-cli的安装，创建webpack模板项目
aoweitu9856的博客
05-16 144
安装Vue-cli 第一种 貌似不可以，然后用了第二种,但是重装系统后，第二种不能用了，用了第一种可以 # 全局安装vue -cli命令npm install --global vue-cli # 创建基于 webpack 模板的新项目,使用webpack的模板# 首先进入 desktop，然后会在desktop目录下创建todolist的项目 vue init...
Windows下安装node环境，搭建vue项目
herionZhang的博客
07-30 375
Windows下安装vue环境，搭建vue项目 Windows下安装vue环境，搭建vue项目 vue是最近比较火的一款前端框架，搭建vue项目需要搭配webpack作为项目构建工具，而webpack在执行打包压缩的时候是依赖node.js环境。 环境安装步骤 安装node.js node.js的官方地址为：https://nodejs.org/en/download/，下载符合自己系统安装包，...
【vue入门】webpack安装
weixin_43287478的博客
02-28 143
由于webpack基于node.js运行，需要安装node.js node.js安装 定义 Node.js 就是运行在服务端的 JavaScript(类似于jdk)。 Node.js 是一个基于Chrome JavaScript运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常...
Vue——12——webpack使用（狂神系列）
dearand的博客
02-21 500
12——webpack使用 webpack就是把Es6规范的代码打包成ES5规范的代码运行 ES6规范可以在编写阶段报错，就是严格模式 什么是Webpack 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.   Webpack是当下最热门的前端资源模块化管
vue-cli+webpack 多环境配置
有猿无分的博客
07-30 281
config文件下面的env-configJS /* 使用方法示例： 打包： 打包dev环境：npm run build --dev 打包test环境：npm run build --test 打包pro环境：npm run build --pro 本地运行： 本地运行dev环境：npm run dev --dev 本地运行test环境：npm run dev --test ...
windows安装webpack和相关工具
u011581852的博客
04-03 329
windows安装Node.js和相关工具1 安装Node.js1.1 下载安装文件1.2 安装nodejs1.3 Node配置全局和缓存路径 1 安装Node.js 1.1 下载安装文件 下载nodejs，官网：https://nodejs.org/en/download/，我这里下载的是node-v14.16.0-win-x64.zip 1.2 安装nodejs 下载完成之后，解压"node-v14.16.0-win-x64.zip"，我解压在本地电脑的路径在D盘下面。 打开cmd指令控制窗口（win
windows安装vue
hxjcsdn的博客
08-21 1580
1. node.js下载地址: https://nodejs.org/en/ 2. 下载安装,选择本地安装地址,其余全部 'next' 3. 设置文件缓存位置, 执行 npm config set cache "D:\Nodejs\node_cache" 4. 设置全局模块存放路径, 执行 npm config set prefix "D:\Nodejs\node_global...
1.vue项目例子——webpack安装
在这里写Bug
07-19 4903
注：凡命令都为加粗斜体 1. 必须要有node.js，官网有一键下载，完了之后npm也在里面了。 2. 全局安装使用命令npm install webpack -g 3. 初始化npm。如果项目目录中没有package.json，使用命令npm init去初始化npm。 图片中红色框为我的项目目录，在该目录下使用命令npm init后，会问你一些问题，按照自己的需要填写就好。最后一
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值