npm安装教程 集成npm webpack vue-cli
一、使用之前,我们先来掌握3个东西是用来干什么的。
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
开始:
如图,下载8.9.3 LTS (推荐给绝大部分用户使用)
双击安装
可以使用默认路径,本例子中自行修改为d:\nodejs
一路点Next
点Finish完成
打开CMD,检查是否正常
再看看另外2个目录,npm的本地仓库跑在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过,一使用缓存目录就生成了),我们试图把这2个目录移动回到D:\nodejs
先如下图建立2个目录
然后运行以下2条命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
如上图,我们再来关注一下npm的本地仓库,输入命令npm list -global
输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站
输入命令npm config list 显示所有配置信息,我们关注一个配置文件
C:\Users\Administrator\.npmrc
使用文本编辑器编辑它,可以看到刚才的配置信息
检查一下镜像站行不行命令1
npm config get registry
检查一下镜像站行不行命令2
Npm info vue 看看能否获得vue的信息
注意,此时,默认的模块D:\nodejs\node_modules 目录
将会改变为D:\nodejs\node_global\node_modules 目录,
如果直接运行npm install等命令会报错的。
我们需要做1件事情:
1、增加环境变量NODE_PATH 内容是:D:\nodejs\node_global\node_modules
(注意,一下操作需要重新打开CMD让上面的环境变量生效)
一、测试NPM安装vue.js
命令:npm install vue -g
这里的-g是指安装到global全局目录去
二、测试NPM安装vue-router
命令:npm install vue-router -g
运行npm install vue-cli -g安装vue脚手架
编辑环境编辑path
对path环境变量添加D:\nodejs\node_global
win10以下版本的,横向显示PATH的,注意添加到最后时,不要有分号【;】
重新打开CMD,并且测试vue是否使用正常
注意,vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目,
他的配置并不全放在根目录下的 webpack.config.js 中。
初始化,安装依赖
运行npm install安装依赖
npm run dev
成功界面,提示打开地址http://localhost:8080
自动打开浏览器http://localhost:8080/#/
npm run build
生成静态文件,打开dist文件夹下新生成的index.html文件
nmp下新建出来的vue01的目录描述:
npm安装教程 集成npm webpack vue-cli相关推荐
- 新手初次npm安装教程
新手初次npm安装教程 一.相关概念 npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包 ...
- npm安装yarn报npm ERR Unexpected token ‘.‘错误的解决办法
npm安装yarn报npm ERR! Unexpected token '.'错误的解决办法 问题背景 Yarn是什么? Yarn的优点 Yarn和npm命令对比 安装准备 安装yarn npm ER ...
- npm——安装教程、安装vue脚手架(ASP.NET Core微服务(五)——【vue脚手架解析接口】过度章节)
npm:是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题. 比如常用的有: 1)允许用户从NPM服务器下载别人编写的第三方包到本地使用. 2)允许用户从NPM服务器下载并 ...
- npm安装教程 搭建vue
一.相关概念 npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包. vue-cli: 用 ...
- npm安装vue_零基础入门vue开发
上面一节我们已经成功的安装了nodejs,并且配置了npm的全局环境变量,那么这一节我们就来正式的安装vue-cli,然后在webstorm开发者工具里运行我们的vue项目. 这一节有两种创建vue项 ...
- NPM 安装 TypeScript 和 npm 的 Invalid package.json 错误以及运行第一个typescript程序
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程). TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计 ...
- npm 安装报错 npm ERR! code Z_BUF_ERROR 问题解决
一.引言 最近在研究 VS Code 插件开发,使用 Yeoman 创建 VS Code 插件示例项目后,需要执行一个 npm install 的命令来安装项目所需要的依赖文件,但是报错了: I'm ...
- npm安装vue-typed-js失败(...npm ERR! enoent This is related to npm not being able to find a file....)解决方案
错误内容 npm ERR! code ENOENT npm ERR! syscall spawn git npm ERR! path git npm ERR! enoent An unknown ...
- mac brew npm安装教程
安装brew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)&qu ...
最新文章
- ACMNO.3 有三个整数a b c,由键盘输入,输出其中的最大的数。 输入 一行数组,分别为a b c 输出 a b c其中最大的数 样例输入 10 20 30 样例输出 30
- 小测试来检验一下你原型链理解的怎么样。
- JS对象变量、闭包的一些问题
- 【78.89%】【codeforces 746A】Compote
- qrcode方法生成的二维码安卓手机长按不识别
- [蓝桥杯][算法提高VIP]密码锁(BFS)
- Loader 知识梳理(2) initLoader和restartLoader的区别
- AcWing285. 没有上司的舞会(树形DP)题解
- [转载] 高级人工智能——第3章 约束推理
- FastDFS原理系列文章
- 台式机U盘安装Centos 安装界面黑屏并且没有网卡驱动
- linux最后一行awk,51CTO博客-专业IT技术博客创作平台-技术成就梦想
- PowerQuery的参数表格用法
- 【电子学会】2020年12月图形化四级 -- 加减法混合运算器
- 拥抱组件化开发,手淘项目内部架构分享
- springMVC开发过程中遇到的404错误的两种情况总结
- 立创开源 tsop48-dip48通用
- 李孟:构建强健的DNS解析系统
- 普通电笔能测几伏电压_测电笔的分类和正确使用方法(纯干货)
- izone成员_PRODUCE48女团将出道,IZONE成员团内担当无责任预测!