Vue安装及配置

参考文章1

参考文章2

1、安装node.js

(官网)下载网站

https://nodejs.org/zh-cn/download

1.1 选择好想安装的目录，一直next即可安装成功

1.2安装完成后，按win+R,输入cmd,回车，打开终端输入node -v和npm -v验证是否安装成功。

node -v

npm -v

出现一下版本号则安装完成

安装后的完整目录：

2、创建全局安装目录和缓存日志目录

在安装目录下，创建名为node_cache和node_global的两个文件夹

打开终端，执行如下命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录。

npm config set prefix "你的安装目录\node_global"
 
npm config set cache "你的安装目录\node_cache"

--我的安装路径为D:\Tools\nodejs
--npm config set prefix "D:\Tools\nodejs\node_global"
--npm config set cache "D:\Tools\nodejs\node_cache"

3、配置环境变量

在安装过程中，自动配置了两个环境变量，需要增加和修改一下。

3.1 修改用户变量

环境变量---用户变量---选中Path---点编辑-将C:\Users\你的用户名\AppData\Roaming\npm修改成

你的安装目录\node_global

修改之前：

修改之后：

3.2增加系统变量

3.2.1此电脑-右键点击属性-高级系统设置-环境变量---系统变量---新建

变量名：NODE_PATH

变量值：你的安装目录\node_global\node_modules

注：这里的node_modules目录是还没有的，但是我们等会把模块安装到全局目录下就会自动生成这个文件夹。

3.2.2此电脑-右键点击属性-高级系统设置-环境变量---系统变量---点击Path添加上%NODE_PATH%

4、配置镜像源

为了以后下载包快速，可修改镜像源（改为国内镜像提高下载速度）

以管理员身份运行cmd，安装淘宝镜像cnpm

淘宝源（有可能会更新）

npm install -g cnpm --registry=https://registry.npmmirror.com/

 查看npm配置修改是否成功

npm config list

查看registry 是不是淘宝源

5、安装vue

5.1安装vue

npm install vue -g

其中-g是全局安装，指安装到global全局目录去，如果不加-g，模块就会安装到当前路径下的node_modules文件夹下，没有目录则自动创建。 

出现一下界面则是安装成功！

如果报错1是这样

解决方案1：使用管理员身份运行这条命令，Win + s 搜索 “命令提示符”，右键以管理员身份运行，然后在输入 npm install vue -g

如果报错2是这样

解决方案2：镜像源不好使 

如果淘宝源不好使，则可以替换成华为源 

npm config set registry=https://mirrors.huaweicloud.com/repository/npm/

输入一下命令可以验证是否更改成功

npm config get registry

如果输出是https://repo.huaweicloud.com/repository/npm/，说明更改成功。

5.2安装webpack模板

npm install webpack -g

5.3安装webpack-cli

在webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli

npm install webpack-cli -g

5.4安装脚手架vue-cli

npm install vue-cli -g

5.5输入vue --version，能输出版本号即成功安装

5.6安装vue-router

npm install vue-router -g

以上命令安装好之后打开node_global\node_modules文件夹，可以看到安装的模块都统一在这里

6、运行第一个的 vue-cli应用程序

6.1先建一个放vue项目的文件夹 D:\Project\VueProject

6.2以管理员身份打开dos窗口

6.3创建一个基于webpack模板的vue应用程序

 vue init webpack 项目名
-- vue init webpack myvue01

6.4根据自己的需求来操作

• 项目名是？回车
• 项目描述？回车
• 作者？回车
• 是否安装编译器 回车
• 是否安装vue-router y 回车
• 是否使用ESLint做代码检查 n 回车
• 是否安装单元测试工具 n 回车
• 单元测试相关 n 回车
• 创建完成后直接初始化 n 回车

6.5根据提示手动初始化

cd myvue01

npm run dev

6.6访问所提示的网站出现一下界面即为成功！