Vue安装及环境配置、开发工具

本文主要介绍了Vue的安装及环境配置，新建vue项目，简单介绍vue开发工具和项目结构。

文章目录

• 前言
• 一、node.js安装和配置
• • 1. 下载安装node.js
  • 2. 配置默认安装目录和缓存日志目录
  • 3. node.js环境配置
  • 4. 配置淘宝镜像源
• 二、安装vue及脚手架
• • 1.安装vue.js
  • 2.安装webpack模板
  • 3.安装脚手架vue-cli 2.x
  • 4.vue-cli2创建vue项目
• 三、安装vue-cli 3.x
• • 1、卸载旧版本
  • 2、安装新版本
  • 3、新建项目
  • 4、运行项目
  • 五、cli3下拉取2.x模板
• 四、开发工具
• • 1、用VS查看vue代码
  • 2、Hbuilder X
• 五、vue项目结构
• 六、我的vue 的系统学习笔记
• • vue笔记一：Vue技术栈
  • Vue笔记二：基础语法

---

前言

vue前端框架的环境搭建

---

一、node.js安装和配置

1. 下载安装node.js

官网下载最新版本：https://nodejs.org/en/download/
可以下载安装包（安装教程见：https://www.runoob.com/nodejs/nodejs-install-setup.html）
或者下载zip文件找个目录保存，解压下载的文件，然后配置环境变量，将解压文件所在的路径配置到环境变量中。

由于Node.js 中默认安装了 npm，所以不用额外配置就能在全局命令中使用 npm命令，在cmd中测试一下是否安装成功了：输入 node -v 与 npm –v分别查看版本信息

2. 配置默认安装目录和缓存日志目录

说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面的可选参数-g，g代表global全局安装的意思）的安装语句时，会将安装的模块安装到【C:Users用户名AppDataRoaming pm】路径中，占C盘空间，当然如果你不介意，可以省略这一设置
1、创建默认安装目录和缓存日志目录
比如，我希望将全模块所在路径和缓存路径，放在我node.js安装的文件夹中，则在我安装的文件夹【"D:Program Files odejs】下创建两个文件夹【node_global】及【node_cache】分别作为默认安装目录和缓存日志目录。

2、执行命令，将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：

npm config set prefix "D:Program Files
ode