npm创建项目
初入公司,前端技术使用react,查询发现使用react创建应用需要node+npm
下面开始安装配置
流程步骤是学习下面网址上内容一步步走的,为避免忘记,记录一下
https://www.cnblogs.com/lgx5/p/10732016.html
NPM安装
1:下载node.js
我这边下载的是64位的msi版本
安装路径 D:\ariel_dl\nodejs
//验证安装
node -v
npm -v
2:npm仓库
node自带npm
路径:C:\Users\当前用户名\AppData\Roaming\npm
修改本地仓库路径
D:\ariel_dl\nodejs 下创建node_global,node_cache文件夹
运行以下2条命令
npm config set prefix "D:\ariel_dl\nodejs\node_global"
npm config set cache "D:\ariel_dl\nodejs\node_cache"
验证修改
npm list -global
出现修改后目录表示ok
3:配置镜像站,提升速度
npm config set registry=http://registry.npm.taobao.org
4:查看配置信息
npm config list //查看所有配置信息
C:\Users\DELL\.npmrc
//查看配置文件
5:检查一下镜像站
1:npm config get registry
2:npm info vue //看看能否获得vue的信息
6:将设置配在global目录下
npm install npm -g
npm install 安装或更新命令
npm 模块名称
-g 安装至global所在目录
此命令执行需要几秒钟
安装完毕后执行 npm -v
可以看出npm模块升级
再次查看全局目录
npm list -global
可以发现目录不为空 D:\ariel_dl\nodejs\node_global
下面有内容
8:设置环境变量
前面的步骤走完后 我们的默认模块更改
原默认模块D:\ariel_dl\nodejs\node_modules
会改变为D:\ariel_dl\nodejs\node_global\node_modules
这时将不能直接运行npm install等命令,否则会报错。
接下来我们只需要配置NODE_HOME的环境变量
路径为D:\ariel_dl\nodejs\node_global\node_modules
就OK了
NPM测试
注意,以下操作需要重新打开CMD让上面的环境变量生效
1:安装vue.js
npm install vue -g
安装完毕 查看
D:\ariel_dl\nodejs\node_global\node_modules\vue
2:安装vue-router
npm install vue-router -g
安装完毕 查看
D:\ariel_dl\nodejs\node_global\node_modules\vue-router
3:安装Vue脚手架
npm install vue-cli -g
4:配置环境变量
此时vue还不能使用
因为Vue脚本没有在path变量中,在自定义全局目录下
编辑path,添加D:\ariel_dl\nodejs\node_global
重新打开cmd,vue -V
V大写
初始化项目
1:创建一个项目
vue init webpack myproject
vue init 模板类型 项目名称;
模板类型有很多种(用vue list查看)
2:安装依赖
cd vue01 //进入目录
npm install //开始安装
npm run dev //运行安装依赖
运行依赖后进入成功界面
打开地址 http://localhost:8080/#/
生成静态文件 npm run build
打开dist文件夹下新生成的index.html文件,进入项目首页
OK 大功告成!