vue-001、Vue的基础环境搭建
2020-07-18 本文已影响0人
Docker_Compose
一、 环境声明
windows10
二、前期准备
1、node-v12.18.2-win-x64.zip
node-v12.18.2-win-x64.zip是从nodejs官网上下载的windows的二进制文件，解压即可使用。
2、test.js
- 创建一个test.js文件，并写下如下内容：
var vue=require("vue")
console.log(vue);
- test.js的作用是用来验证测试的
三、安装nodejs
- 在D盘中创建一个Nodejs文件夹，将node-v12.18.2-win-x64.zip压缩包放在Nodejs文件夹中，解压即可
- nodejs解压后的路径为：
D:\Nodejs\node-v12.18.2-win-x64
四、配置环境变量
1、配置nodej的环境变量
鼠标移到在“我的电脑”上，右键后，选择“属性”；然后，打开“高级系统设置”；接着，再打开“环境变量”；在“系统环境变量（s）”下找到path路径。在path路径下，配置nodejs的安装目录：
D:\Nodejs\node-v12.18.2-win-x64
2、 验证nodejs是否安装成功
- 打开cmd，输入：
node -v
五、修改包路径
1、方案一
创建两个文件夹node_global和node_cache
- node_global文件夹是全局包下载存放，node_cache是node缓存。网上大多数的都是选择在nodejs安装目录下创建这两个文件夹，不过，作者选择在F盘创建，创建如下：
- 在F盘创建nodejs文件夹
- 切换到nodejs文件夹下，再次创建install文件夹
- 在install文件夹下，分别创建node_global和node_cache文件夹。
- 创建完之后，node_global和node_cache文件夹路径分别为：
# node_global
F:\nodejs\install\node_global
# node_cache
F:\nodejs\install\node_cache
- 完成以上步骤之后，需要在系统变量添加node_global的变量
- 鼠标移到在“我的电脑”上，右键后，选择“属性”；然后，打开“高级系统设置”；接着，再打开“环境变量”；在“系统环境变量（s）”下，点击“新建”，输入
# node_modules文件夹不需要自行创建，使用npm安装相关包时，自动创建。
变量名：NODE_PATH
变量值：F:\nodejs\install\node_global\node_modules
修改包路径
# 打开cmd，依次执行如下命令
# 查看包的安装路径的命令
npm root -g
# 修改包路径
npm config set prefix "F:\nodejs\install\node_global"
npm config set cache "F:\nodejs\install\node_cache"
2、方案二
- 切换到nodejs的安装目录，并找到中找到node_modules\npm.npmrc文件，即：
D:\Nodejs\node-v12.18.2-win-x64\node_modules\npm\.npmrc
- 在.npmrc上修改prefix和cache的值，若是没有这两个值，则写添加上去。修改内容如下：
prefix = F:\nodejs\install\node_global
cache = F:\nodejs\install\node_cache
3、验证nodejs
- 验证前的说明
- npm为nodejs自带的包管理器。
- 打开cmd，执行以下的命令
# 查看npm的版本
npm -v
# 安装express包，并可以在node_global下的node_modules文件下看的express的文件夹
npm install express -g
六、安装cnpm
-
安装cnpm前的说明
-因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常；而cnpm就是解决这个问题。 -
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 验证cnpm
cnpm -v
七、验证测试
# 打开cmd，依次执行如下命令
# 下载vue包，并全局安装
npm install -g vue
# 切换到test.js文件所在的目录，运行
node test.js
