锐客网

  1. 首页 > 睿知 > it技术 > >

vue|vue环境搭建

webpackvuevue.jsjavascript


目录

  • Vue环境搭建
    • 安装Node.js环境
      • 12版
      • 16版
    • 安装vue-cli脚手架
    • 创建第一个Vue项目
    • 安装路由
    • vue+elementUI
    • 安装Axios

Vue环境搭建 vue-cli：脚手架（相当于创建Maven项目的模板）
安装Node.js环境 12版
刚开始安装Node的时候安装的是12 版本的，能够安装成功，查看版本信息：
  • node -v 12.x.x
  • npm -v 6.x.x
但是在我接下来安装Node.js淘宝镜像加速时，cmd弹出警告信息，详情如下：
vue|vue环境搭建
文章图片

大致意思就是：版本过低不兼容，要升级版本，于是我在官网下载了16版本的Node.js
16版
Node.js 16版安装成功！
安装Node.js淘宝镜像加速器成功！
  • npm install cnpm -g （-g全局安装）
vue|vue环境搭建
文章图片

vue|vue环境搭建
文章图片

安装vue-cli脚手架 安装vue-cli 脚手架：
  • cnpm install vue-cli -g 全局安装
  • vue list 查看所有模板
vue|vue环境搭建
文章图片

创建第一个Vue项目 安装webpack打包工具
  • npm install webpack -g 全局
  • 【vue|vue环境搭建】npm install webpack-cli -g 全局
    验证安装是否成功：
    • webpack -v
    • webpack-cli -v
vue|vue环境搭建
文章图片

初始化一个项目
初始化项目这里我遇到了一个错误：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 运行项目
vue|vue环境搭建
文章图片

vue|vue环境搭建
文章图片

安装路由
  • npm install vue-router@3.1.3 --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
vue|vue环境搭建
文章图片

vue|vue环境搭建
文章图片

vue|vue环境搭建
文章图片

安装Axios

    推荐阅读


    上一篇：webpack|webpack知识点

    下一篇：Webpack5完整教程|webpack（八）代码分离