IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【Vue】Vue安装详细图解 -> 正文阅读

[JavaScript知识库]【Vue】Vue安装详细图解

VUE安装

1. 安装 node(npm)

下载地址:Node.js (nodejs.org)

下载选择:请添加图片描述
下载完成后进行安装,安装过程中选项默认

2. 安装准备

打开电脑cmd(命令提示符)

  • 查看环境变量是否安装node(npm)

    输入命令

     echo %PATH%
    

    结果如图
    请添加图片描述
    文末有npm字样即表明node(npm)安装成功

  • 查看node版本

    输入命令

    node -v
    

    结果如图请添加图片描述

  • 查看npm版本

    输入命令

    npm -v
    

    结果如图请添加图片描述

  • 查看npm本地仓库

    输入命令

    npm list –global
    

    结果如图请添加图片描述

  • 更改npm本地仓库

    准备好本地仓库位置
    如图仓库目录结构

    请添加图片描述
    输入命令

    npm config set prefix  "(node_global)路径"
    npm config set cache  "(node_cache)路径"
    

    结果如图请添加图片描述

  • 验证npm本地仓库

    输入命令

    npm list -global
    

    结果如图请添加图片描述
    安装准备完成

3. 安装插件

  • 配置下载镜像

    国内npm官方镜像非常慢,这里推荐更改镜像
    输入命令

    npm config set registry=https://registry.npm.taobao.org
    

    结果如图请添加图片描述

  • 检查镜像

    输入命令

    npm config get registry
    

    结果如图请添加图片描述
    下载镜像更改完成

  • 获取vue信息

    输入命令

    npm info vue
    

    结果如图请添加图片描述

  • 安装更新模块

    输入命令

    npm install npm –g
    

    结果如图请添加图片描述
    插件安装完成

4. 配置vue

  • 配置系统环境

    右击此电脑 → 点击属性 → 点击高级系统设置 → 点击环境变量请添加图片描述
    在系统变量中找到Path请添加图片描述
    点击Path进行编辑

    新增一条 (node_global)路径,例:Y:\nodejs\node_global请添加图片描述
    新增完成后一定要点击确定

    回到系统变量,点击新建请添加图片描述
    新建内容:

    变量名:NODE_PATH
    变量值:Y:\nodejs\node_global\node_modules
    

    如果node_global文件夹中没有node_modules文件夹,请自己新建。
    请添加图片描述
    完成后,点击确定,确定,确定。
    不能直接点击关闭!

  • 安装vue

    输入命令

    npm install vue -g
    

    结果如图请添加图片描述

  • 安装vue-router

    输入命令

    npm install vue-router -g
    

    结果如图在这里插入图片描述

  • 安装vue-cli

    输入命令

    npm install vue-cli -g
    

    结果如图在这里插入图片描述

  • 验证vue版本

    输入命令

    vue -V
    

    结果如图在这里插入图片描述
    vue安装完成

5. 初始化vue项目

  • 配置vue项目信息

    输入命令

    vue init webpack vue01 (vue01是项目名称,可自行定义)
    

    结果如图在这里插入图片描述

  • 项目配置信息

    1. 配置项目名,填写后回车,如果不需要就直接回车,注:此处不能使用大写

      结果如图在这里插入图片描述

    2. 项目描述,填写后回车,如果不需要就直接回车

      结果如图在这里插入图片描述

    3. 项目作者,默认计算机用户名,填写后回车

      结果如图在这里插入图片描述

    4. 项目构建方式,推荐选择第一种,选择后回车

      结果如图在这里插入图片描述

    5. 安装vue的路由插件,选择yes,输入后回车

      结果如图在这里插入图片描述

    6. 是否使用ESLint检测你的代码,选择no,输入后回车

      结果如图在这里插入图片描述

    7. 是否安装单元测试,自行选择,输入后回车

      结果如图在这里插入图片描述

    8. 是否安装E2E测试框架NightWatch(E2E,也就是End To End,就是所谓的“用户真实场景”)自行选择,输入后回车

      结果如图在这里插入图片描述

    9. 项目创建后是否要为你运行“npm install”这里选择包管理工具,选择npm,输入后回车

      结果如图在这里插入图片描述

    10. 项目开始初始化

      结果如图在这里插入图片描述

    11. 项目初始化配置成功

      结果如图在这里插入图片描述
      此时在对应vue项目安装目录中可以看到vue项目包

      结果如图在这里插入图片描述

    12. 初始化项目(安装依赖)

      进入项目目录
      结果如图
      在这里插入图片描述
      输入命令安装依赖

      npm install
      

      结果如图在这里插入图片描述
      依赖安装成功

    13. 运行vue项目

      输入命令

      npm run dev
      

      结果如图
      在这里插入图片描述

    14. 打开浏览器输入网址:http://localhost:8080

      结果如图在这里插入图片描述
      至此,vue项目安装并运行成功。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-07-03 10:40:34  更:2022-07-03 10:41:38 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 13:22:07-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码