win10下安装部署vuejs的webpack脚手架工具_Yvettre的博客-CSDN博客_win10 安装webpack
win10下安装部署vuejs的webpack脚手架工具
Yvettre
于 2018-07-23 16:23:37 发布
9105
收藏
分类专栏：
前端
ToolsConfig
文章标签：
webpack
vuejs
win10
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yvettre/article/details/81169845
版权
前端
同时被 2 个专栏收录
4 篇文章
1 订阅
订阅专栏
ToolsConfig
5 篇文章
0 订阅
订阅专栏
参考vuejs的官方文档：戳我
1. 安装nodejs
nodejs官方下载地址：戳我选择合适的版本下载，我这里选的是node-v8.11.3-x64.msi安装路径一般不装在C盘，所以我这里选择：D:\nodejs\一路next默认等待安装完毕
2. 设置nodejs的global和cache路径
设置路径能够把通过npm安装的模块集中在一起，便于管理。
在nodejs的安装目录D:\nodejs\下，新建node_global和node_cache两个文件夹执行指令： npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache" 设置成功后，后续用命令npm install -g XXX安装的XXX模块就在D:\nodejs\node_global\node_modules里。查看配置信息指令：npm config list
3. 设置环境变量
添加用户变量PATH：D:\nodejs\node_global新增系统变量NODE_PATH：D:\nodejs\node_global\node_modules
4. 安装cnpm（可选）
由于许多npm包都在国外，直接使用npm指令下载安装会比较慢，好像很多人推荐用淘宝的镜像服务器，这样所有用npm的指令都可以用cnpm代替。我个人喜欢直接用npm所以没有安装，实测其实npm也挺快的啊=。=不想安装的小伙伴就跳过即可
参考网址：戳我安装指令：npm install -g cnpm --registry=https://registry.npm.taobao.org
备注：-g表示下载安装的包都放在之前配置好的安装目录下，否则就会在执行指令的当前目录下
5. 安装vue-cli
vue-cli是vuejs官方提供的一个命令行工具安装指令：npm install -g vue-cli安装完成后，vue就是一个指令了
D:\nodejs\node_global
λ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\nodejs\node_global\vue -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\nodejs\node_global\vue-init -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
D:\nodejs\node_global\vue-list -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
+ vue-cli@2.9.6
added 252 packages in 61.697s
6. 下载webpack脚手架
(1) 下载指令：vue init webpack learnVue
其中webpack是打包和压缩的工具模板，learnVue是工程文件夹名称执行完会在当前目录下生成一个名为工程名称的文件夹，并下载好了模板，但相关依赖还没有安装
(2) 执行指令后会先提示下载中，大概几秒后会提示输入工程的相关信息：
project name：工程名（不是文件夹名），不可以含有大写字母，后续是页面的titlevue-router：vuejs提供的路由工具，我选择安装，相关介绍可戳这里ESLint：好像是一个语法检查选项，我不安装unit tests和e2e tests：好像都是测试项，我也没有安装最后一个选项是推荐相关依赖后续使用npm install指令安装，选择Yes, use npm
(3) 然后等待一段时间即完成下载
F:\develop
λ vue init webpack learnVue
? Project name learn-vue
? Project description my first vue project
? Author yvettre
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "learnVue".
# Installing project dependencies ...
# ========================
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN notice [SECURITY] mime has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.3.6 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
> uglifyjs-webpack-plugin@0.4.6 postinstall F:\develop\learnVue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
added 1133 packages in 151.274s
# Project initialization finished!
# ========================
To get started:
cd learnVue
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
(4) 下载完毕后可以打开工程文件看到如下图所示的目录结构，我们的代码就放在src这个文件夹中，其他文件夹都是一些依赖和工具，不需要关心
7. 下载webpack相关依赖
根目录下有一个package.json的文件： 要安装红色箭头所指的那些依赖项，安装指令是：npm install
F:\develop\learnVue
λ npm install
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 14.505s
8. 运行webpack的demo
F:\develop\learnVue
λ npm run dev
DONE Compiled successfully in 1637ms 21:14:46
I Your application is running here: http://localhost:8080
这样就运行起来啦，然后我们在浏览器中访问localhost:8080，即可看到：
至此，vuejs的webpack脚手架下载完毕，这套框架是支持热更新的（即修改完src的代码后，直接在页面刷新即可看到页面更新）。关于打包和压缩，有待以后学习。
Yvettre
关注
关注
点赞
收藏
打赏
评论
win10下安装部署vuejs的webpack脚手架工具
参考vuejs的官方文档：戳我1. 安装nodejsnodejs官方下载地址：戳我选择合适的版本下载，我这里选的是node-v8.11.3-x64.msi安装路径一般不装在C盘，所以我这里选择：D:\nodejs\一路next默认等待安装完毕2. 设置nodejs的global和cache路径设置路径能够把通过npm安装的模块集中在一起，便于管理。在nodejs...
复制链接
扫一扫
专栏目录
安装node.js，及vue-cli脚手架和webpack加载打包工具
钟米苏的博客
08-21
496
node.js安装(以Windows版本安装v12.0.0版)
Node.js 是一个跨平台 JavaScript 运行环境，使开发者可以搭建服务器端的JavaScript应用程序
MND介绍：https://developer.mozilla.org/en-US/docs/Glossary/Node.js
官网地址：
1.官网下载node.js途径：
网址：https://nodejs.org/en/download/releases/
2.中文网站入门教程途径：
网址：http://n
【vue系列之一】使用vue-cli脚手架工具搭建vue-webpack项目
weixin_30621919的博客
05-09
288
　　最近更新了webpack配置详解，可移步vue-cli webpack详解
　　对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个<script>标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等。对于一个需要长期维护和大型的项目...
参与评论
您还未登录，请先
登录
后发表或查看评论
4. browserslist
最新发布
m0_71902265的博客
10-30
70
browserslist
Vue环境搭建+VSCode+Win10
junshangshui的专栏
05-19
6万+
一、安装Node.js（js的运行环境）
1.在Node.js官网https://nodejs.org/en/download/下载安装包。
2.下载后进行安装。
3.打开命令行，输入node -v可以查看到版本号。输入npm –v可看到npm版本号。
新版的Node.js已自带npm（类似.net中的nuget包管理器），安装Node.js时会一起安装。（将来要更新npm可用这个命令npm i...
npm最新版 webpack win10安装
c5113620的博客
03-30
1万+
先下载安装node
选择Windows Installer (.msi) 64位下载安装，默认所有选项
会自动把node , npm加入环境变量path验证安装成功node -v
v8.11.0
npm -v
5.6.0新建webpack项目目录D:\proj\webpack\webpack_testcd /d D:\proj\webpack\webpack_testnpm initnp
搭建Vue脚手架（vue-cli）并创建一个项目
热门推荐
kivet 的博客
08-30
7万+
1、 安装nodejs环境
官网下载：https://nodejs.org/en/download/
一直默认就行，路径可以改变但要记得到
安装完成后cmd，输入
node -v
npm -v
如果能看到node和npm的版本号了，说明已经安装成功
注：node版本最好高一点，保险的话直接安装最新版本的，因为vue运行需要基于npm一定的版本（最好是3.x.x以上），版本低了...
windows环境搭建Vue开发环境并创建第一个Vue项目
波爷的博客
08-26
2597
一、安装node.js（https://nodejs.org/en/）
下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。
二、设置nodejs prefix（全局）和cache（缓存）路径
nodejs安装好之后，通过npm下载全局模块默认安装到{%USERDATA%}C:\Users\username\AppData\下的R...
windows webpack 安装使用
weixin_41979605的博客
02-16
616
对于自己写前端知识的说明，前面面试的时候有人问我，我的博客里面前端后端都在做，是不是打算做全栈开发，实际上我并不打算做全栈，我一直是Java开发为主的程序员，之所以学习前端，主要是自己不会，想做一些简单的功能，对前端比较好奇，本着借鉴吸收的目的在学习，如果哪个前端的同学有兴趣一起讨论的欢迎探讨啊，我想做一些简单的交互，可是不会，有人请教讨论自是最好。
webpack打包
为啥要用webpack呢？什么是webpack？
就是打包工具，webpack作为前端专业的打包工具，可以把模块抽离，打包到一个文件里.
windows10 系统安装node.js和webpack
大鱼物联
05-04
1910
一、安装webpack1、安装最新的node.js；最新的node.js包括了npm,并且是全局安装的；下载地址https://nodejs.org/en/，左侧为稳定版，右侧为最新版，推荐稳定版。2.安装Node.js一路下一步，记住安装路径（此处安装在 D:\Program Files\nodejs 下）。安装完成后（新版本的Node.js已经自动配置好环境变量了。）运行cmd，执行node ...
win10下，webpack创建vue项目
Coder.Monkey的工作簿
08-03
1051
创建vue项目，就我目前学习了以下3中方案，各有特点。
第一种是之前的文章就讲过的vue-cli创建vue项目，参考：https://blog.csdn.net/justflow/article/details/109273620
第二种是vue-cli 创建webpack模版的vue项目，基本和上面的方式相同，就是起始命令有点差异
# vue init webpack project-name
以上两种基本都是基于vue的脚手架vue-cli来实现项目创建的。
第三种就是完全和vue-cli无
window 10 npm下webpack安装与运行-入门第一篇
weixin_39803136的博客
08-11
4819
一、安装webpack
1、安装最新的node.js；最新的node.js包括了npm,并且是全局安装的；
2、建立开发目录；
3、DOS命令下，进入第二步建立的目录，并运行 npm init命令，建立package文件；
4、打开package文件，看一下，name字段名是不是"webpack"的，如果是，改；否者下一步webpack无法局部安装到此目录；
5、运行npm inst
win10全局安装webpack成功，项目中运行报错.，提示 无法加载文件 C:\Users\fy\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。
weixin_43769220的博客
11-16
498
webpack打包错误的解决办法：webpack : 无法加载文件 C:\Users\fy\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。
问题描述
1.全局安装了webpack，能查看版本号
2.使用vscode建立了一个web项目。在vscode终端下，查看版本号及执行webpack打包操作，产生报错信息如下：
产生原因
因为powershell对于脚本的执行有着严格的安全限制
解决方案
一、使用管理员身份打开PowerShell
二、键入Set-Exe
win10系统电脑cmd命令框提示“webpack不是内部指令”详解
zhanghuayao的博客
03-31
3010
废话不多说，直接上教程。1、安装nodejs---注意安装路径（ps:名称不重要，重要的是 路径。不管你是默认安装，还是手动选择路径安装，请记住路径）nodeJS中文网下载地址：（注意系统是32位或64位，请先检查电脑系统）http://nodejs.cn/download现在安装nodeJS会自动安装npm包管理。安装完成之后，输入如下图命令，检测是否安装正确。看到我这里nodejs的安装路径名...
在Windows下使用webpack入门
Hello, Ying
04-14
1万+
在Windows下使用webpack入门
1. webpack的打包示意图理解：
2. 前期准备
安装node
新建一个文件夹：webpack_test
3. 安装并使用webpack
（1）在命令行下进入文件夹：webpack_test中，并初始化：
（2） 在当前文件中安装webpack安装webpack成功后，会看到webpack_test下有两个文件：node_modules和package.js
浅谈windows下搭建Vue.js开发环境
筱葭的博客
02-10
1万+
1、安装node.js
node.js的官方地址为：https://nodejs.org/en/download/。
根据windows版本后，选择要下载的安装包，下载完毕，按照windows一般应用程序，一路next就可以安装成功，建议不要安装在系统盘（如C：）。
2、设置global和cache路径
设置路径能够把通过npm安装的模块集中在一起，便于
【Webpack】之 下载安装3.8.1（Windows10）
fanfan4569的博客
03-13
1567
平台： window10
npm：8.9.4
ps：之前按照官网（官网的文档没编写好），然后各种报错，最后用3.8.1版本
（1）预备
首先需要node.js 运行环境。
下载地址：https://nodejs.org/en/
检测安装成功：
（2）安装webpack
① npm install -g webp...
windows下安装nodejs、webpack及打包步骤
Henery的博客
09-18
2万+
1.下载Node.js
https://nodejs.org/en/，左侧为稳定版，右侧为最新版，推荐稳定版。
2.安装Node.js
一路下一步，记住安装路径（此处安装在 D:\Program Files\nodejs 下）。
安装完成后运行cmd，执行node -v和npm
-v命令查看安装情况。如执行结果如下图，说明安装成功。
（执行完该命令后，nodejs安装目录
windows安装nodejs和安装npm和安装webpack
chenhaotao的博客
01-23
1210
webpack基于node.js运行，首先需要安装node.js
npm作为管理和分发的工具,可以对应用的依赖进行管理,通过npm 下载js库，打包js文件。
一. 安装Node.js
下载
官网:https://nodejs.org/en/download/
百度云:
推荐下载LTS版本，我安装的是9.4.0。
安装完成检查PATH环境变量是否设置了node.js的路径。如果是通过安装包安装的...
windows10系统搭建vue.js 脚手架
wwyywwsaber的博客
04-02
1408
1.安装NodeJS
NodeJS 提供方便的NPM依赖管理和编译打包工具，所以NodeJS是很好的选择。
下载地址：http://nodejs.cn//download/
下载后解压放到合适位置，然后配置系统变量
打开cmd命令行，输入npm -v 出现版本信息即安装成功
2.设置淘宝镜像
因为npm使用的是国外中央仓库，下载慢，所以配置镜像；
安装成功后用cnpm代替npm命令
npm install -g cnpm --registry=https://registry.n
webpack的构建流程是什么?
愚公的博客
11-23
78
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
确定入口：根据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译：
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：大白
设计师：CSDN官方博客
返回首页
Yvettre
CSDN认证博客专家
CSDN认证企业博客
码龄7年
暂无认证
29
原创
92万+
周排名
112万+
总排名
18万+
访问
等级
1423
积分
32
粉丝
89
获赞
24
评论
248
收藏
私信
关注
热门文章
MySQL：向已有数据表中插入新的一列数据
63039
win10下vscode配置sftp以方便快捷传送文件到服务器
24061
pandas：对dataframe进行groupby后求众数mode
18925
cmder在win10下的安装和配置
14257
win10下安装部署vuejs的webpack脚手架工具
9105
分类专栏
python
14篇
Linux
6篇
前端
4篇
后台
2篇
ToolsConfig
5篇
数据库
1篇
算法与数据结构
1篇
git
3篇
笔试题
2篇
C++
2篇
最新评论
Flask+uwsgi+Nginx的简易搭建(ubuntu)
Sce_rain:
有个很奇怪的问题，uwsgi启动以后一定要先执行killall -s INT uwsgi杀一次进程，不然通过公网ip访问会超时，执行杀进程命令后就可以正常访问……这？？？
MySQL：向已有数据表中插入新的一列数据
Michelle️:
谢谢大神！但大神我有个问题，这样做的话，感觉以前的test表会不存在，怎么可以在生成新的表前又保留原来的test表呢？
MySQL：向已有数据表中插入新的一列数据
疾风劲草～:
加个好友，想请教一下
由numpy.arange函数看双精度浮点数的精度问题
qq_43166408:
我为这个查了好久，谢谢分享！
python中对象的赋值、浅拷贝和深拷贝
tsparrot
回复
学分: 好巧
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
C++使用sort排序导致runtime error(strict weak ordering)
sed常用用法的小结
Flask(flask_restful.Api)+vue(webpack)+axios实现简单的前后端分离
2019年2篇
2018年29篇
目录
目录
分类专栏
python
14篇
Linux
6篇
前端
4篇
后台
2篇
ToolsConfig
5篇
数据库
1篇
算法与数据结构
1篇
git
3篇
笔试题
2篇
C++
2篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
Yvettre
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值