vue环境搭建

Vue环境搭建

vue-cli：脚手架（相当于创建Maven项目的模板）

安装Node.js环境

12版

刚开始安装Node的时候安装的是12 版本的，能够安装成功，查看版本信息：

• node -v 12.x.x
• npm -v 6.x.x

但是在我接下来安装Node.js淘宝镜像加速时，cmd弹出警告信息，详情如下：

大致意思就是：版本过低不兼容，要升级版本，于是我在官网下载了16版本的Node.js

16版

Node.js 16版安装成功！

安装Node.js淘宝镜像加速器成功！

• npm install cnpm -g （-g全局安装）

安装vue-cli脚手架

安装vue-cli 脚手架：

• cnpm install vue-cli -g 全局安装
• vue list 查看所有模板

创建第一个Vue项目

安装webpack打包工具

• npm install webpack -g 全局

• npm install webpack-cli -g 全局

  验证安装是否成功：

  • webpack -v
  • webpack-cli -v

初始化一个项目

初始化项目这里我遇到了一个错误：Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFOUND codeload.github

查阅资料，检查自己的node,vue和webpack安装成功，但就是初始化项目失败！可能因为webpack打包工具需要外网资源，最后参考下面这篇博客得以解决

参考链接：解决报错：vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOENT github.com_atubo1234的博客-CSDN博客

• vue init webpack vue-cli 使用webpack模板初始化Vue项目
• cd vue-cli 进入初始的项目
• npm install 下载依赖
• npm run dev 运行项目

安装路由

• npm install [email protected] --save-dev

vue+elementUI

cmd初始化模板项目

安装 element-ui

• npm i element-ui -S
• npm install element-plus --save

安装依赖

• npm install

安装SASS加载器

• cnpm install sass-loader node-sass --save-dev

启动测试

• npm run dev

安装Axios