#今天也是摸鱼的一天#
本文章仅用作于个人学习笔记(羞耻+1)复制代码
一、Node Package(包) Manager(管理器)
npm:是随同NodeJS一起安装的包管理工具,包的结构使您能够轻松跟踪依赖项和版本。常用的如下:
- 下载可立即使用的独立工具。
- 与任何npm用户共享代码。
话不多说,我们先安装NodeJS(npm也集成在里面):
- 首先从 NodeJs官网 安装(本次安装示例为 64位 Windows版本)
- 安装NodeJs安装包 ,我们选择把NodeJs安装到 D盘(无脑下一步就好)
- 安装完成后 目录 会有以下文件
- 进入终端(CMD)查看是否正常
node -v 查看Node版本
npm -v 查看npm版本
echo %PATH% 查看系统变量复制代码
5.更改 全局模块存放路径 由于我们把NodeJs安装在了D盘 ,为了方便管理也把npm的本地仓库路径(默认安装在C盘)更改到 D盘 (这里需要在D:\nodejs目录下创建一个空的node_global文件夹)
npm config set prefix "D:\nodejs\node_global" 设置全局模块存放路径
npm config set cache "D:\nodejs\node_cache" 设置缓存文件夹
npm list -global 查看本地全局安装的包(查看是否更改路径成功)
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装 淘宝NPM镜像 (cnpm) 以提升速度(npm是从国外服务器下载,受网络影响大,可能出现异常)
复制代码
因为我们已经更改了vue脚本的global路径,需要向path环境变量中添加全局模块的目录路径
添加global目录路径到path环境变量中
npm config list 显示所有配置信息复制代码
二、Vue-CLi 3.x脚手架
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,你可以专注在撰写应用上,而不必花好几天去纠结配置的问题,Vue CLI提供:
- 通过 @vue/cli搭建交互式的项目脚手架。
- 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
我们可以根据 Vue-CLi官方提供的文档 进行安装
1.安装Vue-CLi包
cnpm install -g @vue/cli 用cnpm(淘宝镜像)安装Vue-CLi脚手架的包到全局目录下复制代码
2.检查其版本是否正确
vue --version 检查其版本是否正确 (3.x)复制代码
2.创建一个项目
vue create hello-world 创建一个名为 hello-world 的项目复制代码
cd hello-world 进入项目文件夹
npm run serve 启动本地开发环境复制代码
http://localhost:8080/ 打开浏览器进入复制代码
目录结构如下复制代码