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

最新推荐文章于 2024-09-11 14:08:41 发布
最新推荐文章于 2024-09-11 14:08:41 发布
阅读量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下安装Vue
踏雪无痕
05-10 3547
一.下载安装包 前往Node.js官网下载：添加链接描述 下载如下： 双击执行安装，指定安装路径： 默认按安装全部组件： 安装成功： 二.设置nodejs prefix（全局）和cache（缓存）路径 1.在nodejs安装路径下，新建node_global和node_cache两个文件夹 2.设置缓存文件路径和全局模块存放路径 三.基于 Node.js 安装cnpm（淘宝镜像） 四.设置环境变量 设置环境变量可以使得在任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径 1.鼠标
Windows下安装vue开发环境
一只小木头的博客
10-19 607
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
Vue-Cli(脚手架)安装步骤及如何创建Vue-Cli项目
最新发布
m0_65696193的博客
09-11 2430
表示“你习惯把一些配置信息存放在哪里？VUE Cli工程启动的服务支持热部署(热更新，即:当保存对源代码的修改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件)，并没有重启服务的做法，如果在某些场景中需要实现“重启”的效果（例如修改服务端口等)，可以先停止服务，然后再次启动服务。提示:即使显式的指定了端口号，如果指定的端口仍被其它服务占用，仍会自动在指定端口号的值的基础上递增，以使用新的端口号!，表示“选择你的工程中希望使用的Vue.js的版本”，推荐选择 2.x 这项，选择到目标项后按下键盘的。
windows安装webpack
大米666的博客
09-05 514
1.创建webpack文件夹 2.从cmd进入文件夹，用 npm init 命令进行初始化 3.输入 npm install webpack –save-dev 命令进行安装
window下安装Vue.js
qq_27552077的博客
03-16 2649
遇到各路坑货的安装教程之后我终于成功安装了，接下来分享一下如何在window下安装吧！先说一下大概思路：Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。然后nodejs里面自带有npm了，待会可以通过npm安装一些命令行工具。 一、安装nodejs 下载地址：https://nodejs.org/en/downlo
Windows下--VUE安装
白舟的博客
08-10 593
**安装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 160
安装Vue-cli 第一种 貌似不可以，然后用了第二种,但是重装系统后，第二种不能用了，用了第一种可以 # 全局安装vue -cli命令npm install --global vue-cli # 创建基于 webpack 模板的新项目,使用webpack的模板# 首先进入 desktop，然后会在desktop目录下创建todolist的项目 vue init...
在windows安装webpack
Caeser110的博客
09-19 615
前言 在学前端开发，需要安装npm和webpack，遇到很多坑，其实也不算是坑吧，只是没开发过前端，所以有点懵，现在可以了，我想记录一下。 官网下载nodejs 链接：https://pan.baidu.com/s/112FORLURYOimSUfuXhMq0w 提取码：2vut 复制这段内容后打开百度网盘手机App，操作更方便哦 双击安装之后，一路下一步即可 在nodejs安装路径下新建两个...
Windows下安装node环境，搭建vue项目
herionZhang的博客
07-30 390
Windows下安装vue环境，搭建vue项目 Windows下安装vue环境，搭建vue项目 vue是最近比较火的一款前端框架，搭建vue项目需要搭配webpack作为项目构建工具，而webpack在执行打包压缩的时候是依赖node.js环境。 环境安装步骤 安装node.js node.js的官方地址为：https://nodejs.org/en/download/，下载符合自己系统安装包，...
windows 下安装webpack
hjh15827475896的博客
01-09 1084
1. 去nodejs的官网下载 nodejs  并安装 2. 安装好nodejs后，则 npm 也会被自动的安装            安装好后可以使用命令    node -v    和  npm -v来看看是否正确 的安装 3. 全局安装 webpack              命令行 ：  npm install webpack -g  // 后面这个 -g表示全局的安装    就...
【vue入门】webpack安装
weixin_43287478的博客
02-28 154
由于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 512
12——webpack使用 webpack就是把Es6规范的代码打包成ES5规范的代码运行 ES6规范可以在编写阶段报错，就是严格模式 什么是Webpack 本质上， webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当webpack处理应用程序时， 它会递归地构建一个依赖关系图(dependency graph) ， 其中包含应用程序需要的每个模块， 然后将所有这些模块打包成一个或多个bundle.   Webpack是当下最热门的前端资源模块化管
vue-cli+webpack 多环境配置
有猿无分的博客
07-30 294
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 347
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 1619
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...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值