vue入门及其环境配置

1、安装node.js

1.1 下载node.js

这里可以去官网下载最新版本：Download | Node.js

这里我安装的是12.18.3的node.js

1.2 配置node默认安装目录

安装好node.js后默认的安装目录在【C:\Users\[当前电脑名称]\AppData\Roaming】在这个文件夹下的两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

注：AppData为隐藏文件夹

这里可以用命令来改变默认安装目录和缓存日志目录

查看命令为：

npm config get prefix 查看npm全局安装包保存路径
npm config get cache 查看npm缓存路径

设置命令为： 

npm config set prefix "D:\xxxx"   设置npm安装包保存路径
npm config set cache "D:\xxxx"  设置npm缓存路径

npm config list 查看所有npm 配置

1.3 环境配置

【我的电脑->右键->属性->高级系统设置->高级->环境变量】

在系统变量选项卡中新建系统变量

 并且在path里添加一条

 1.4 配置国内下载镜像

cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

检查是否安装成功

npm -v  查看npm版本

cnpm -v 查看cnpm版本

2、安装vue

2.1 安装vue.js

cnpm install vue -g

检查是否安装成功：

cnpm info vue

2.2 安装vue脚手架工具vue-cli

cnpm install -g vue-cli

检查是否安装成功：

vue -V

 

2.3 安装webpack（用于打包，非必须）

cnpm install -g webpack

3、在IDEA中使用vue

3.1 在IDEA中安装vue插件

【File->Settings->Plugins->Marketplace】搜索vue并安装

 打开设置

安装插件

 3.2 运行vue项目

3.2.1 进入到项目路径

打开项目后点击下方的Terminal确保路径在项目中 

3.2.2 生成node_modules

使用 npm install 或 cnpm install

这里推荐使用cnpm install，使用npm可能会由于网络原因导致依赖安装失败

3.2.3 运行vue

npm run dev

最后使用这个命令就可以运行项目了

运行成功展示：htttp://localhost:8080