手把手教你搭建 vue 环境

手把手教你搭建 vue 环境

第一步 node环境安装

1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装
1.2 如果本机已经安装node的运行换,请更新至最新的node 版本
下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/

第二步 node环境检测

为了快乐的使用命令行,我们推荐使用 gitbas
1.1 下载git 并安装
下载地址 https://git-for-windows.githu…
安装成功后 右键菜单

手把手教你搭建 vue 环境

我们可以看到 Gti Bash Here 。说明我们已经安装成功git
1.2 检测node 是否安装成功
右键空白,选择 Gti Bash Here 弹出

手把手教你搭建 vue 环境

1.2.1 在终端输入 node -v

手把手教你搭建 vue 环境

如果输出版本号,说明我们安装node 环境成功
随便我们可以查看 npm 的 版本号
可以使用 npm -v

手把手教你搭建 vue 环境

第三步 vue-cli脚手架安装

2.1 如果访问外网比较慢,可以使用淘宝的镜像 https://npm.taobao.org/
打开命令终端 npm install -g cnpm –registry=https://registry.npm.taobao.org
回车之后,我就可以可以快乐的用 cnpm 替代 npm

手把手教你搭建 vue 环境

看到这样

手把手教你搭建 vue 环境

恭喜你,你已经成功安装了 cnpm
但是此后,我们还是使用 npm 来运行命令

2.2 接下来就是重点了 安装vue-cli
npm install vue-cli -g

手把手教你搭建 vue 环境

如果你很幸运,那么接下来就是这样的

手把手教你搭建 vue 环境

我们成功了

2.3 进入我们的项目目录,右键 Gti Bash Here
2.4 初始化项目 vue init webpack vue-demo

手把手教你搭建 vue 环境

一直回车直到

手把手教你搭建 vue 环境

是否要安装 vue-router 项目中肯定要使用到 所以 y 回车

手把手教你搭建 vue 环境

是否需要 js 语法检测 目前我们不需要 所以 n 回车

手把手教你搭建 vue 环境

是否安装 单元测试工具 目前我们不需要 所以 n 回车

手把手教你搭建 vue 环境

是否需要 端到端测试工具 目前我们不需要 所以 n 回车

手把手教你搭建 vue 环境

接下来 ctr+c 结束

2.5 进入 cd vue-demo

手把手教你搭建 vue 环境

2.6 执行 npm install

手把手教你搭建 vue 环境

如果出现下图,说明安装成功

手把手教你搭建 vue 环境

2.7 接下来执行 npm run dev

手把手教你搭建 vue 环境

默认浏览器会自动打开

注意:如果您的浏览器是ie9以下的版本,请升级浏览器到最新版本或者下载谷歌浏览器或者火狐浏览器进行预览。在地址栏输入 http://localhost:8080/#/进行访问

手把手教你搭建 vue 环境

恭喜,你已经成功安装,并运行起来vue基础项目,踏入了vue的大门。

转自:https://segmentfault.com/a/1190000008922234

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/113808.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • C#中如何遍历ArrayList

    C#中如何遍历ArrayList 前言:ArrayList是非常方便的动态数组,在使用ArrayList时经常会遇到一些问题,码了一些百度文库查找到的资料以及例子,希望可以帮助大家在需要时方便查找。1、什么是ArrayListArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处:     <1>动态的增加和减少元素     &…

  • 鲲鹏920服务器_华为鲲鹏服务器

    鲲鹏920服务器_华为鲲鹏服务器安装任意Mysql版本都适用配置本地yum源备份原yum库文件并将新配置写入repo文件。#mv/etc/yum.repos.d//etc/yum.repos.d-bak#mkdir/etc/yum.repos.d#echo-e”[kunpeng]\nname=CentOS-kunpeng-Base-mirrors.huaweicloud.com\nbaseurl=https:…

    2022年10月16日
  • 数据中心机房建设方案

    数据中心机房建设方案第一章概述 项目建设需求 总体需求 机房工程设计施工的安全技术、劳动保护、防火要求应按国家有关部门颁布的现行规定执行。 设计施工单位必须按要求施工。为保证设计和施工程序的严密性,如有设计变更,应按有关程序办理签证并保存相应的文档资料。 设计施工单位必须认真做好施工组织设计和准备工作。 设计施工单位须依照国内及国际最新颁布的标准、规范进行各系统的施工、安装。 业主方保…

  • 选择有这些特点的it行业人力外包公司没错

    选择有这些特点的it行业人力外包公司没错互联网的快速发展加快了传统企业信息化进程,很多传统企业自己组建软件技术部,既缺少技术开发经验,又缺乏软件项目管理经验,因此软件外包成为这些公司的首选。但完全的项目外包,使得其与软件外包公司的沟通变的不畅通,软件外包公司又缺乏传统企业的业务经验,且保密性很差,所以不少传统企业会选择和it行业人力外包公司合作来引进it人才,那么什么样的it行业人力外包公司值得选择?一、选择有一定年限的it行业人力外包公司为什么要选择一个成立时间长的it行业人力外包公司呢?因为it行业人力外包公司成立的时间越长,越能

  • HDFS常用命令的学习

    HDFS常用命令的学习HDFS常用命令的学习文章目录HDFS常用命令的学习1.hadoopfs,hadoopdfs,hdfsfs,hdfsdfs区别2.Hadoop命令3.HDFS常用命令命令的使用常用命令示例小结hdfs与getconf结合使用hdfs与dfsadmin结合使用hdfs与fsck结合使用其他命令4.安全模式1.hadoopfs,hadoopdfs,hdfsfs,hdfsdfs区别fs与dfs有什么区别呢?fs是文件系统,dfs是分布式文件系统。fs

  • SAP WebIDE里OData service catalog的实现原理「建议收藏」

    SAP WebIDE里OData service catalog的实现原理「建议收藏」我们在SAPWebIDE里创建UI5应用时,可以从Servicecatalog里选择需要的OData服务,如下图所示:这个ag3-backend是什么意思?是我在SAPCloudPlatform的Destination标签页里维护的一个Destination:这个destination指向了一个OnpremiseABAPNetweaver系统,AG3,通过SAPCloud…

    2022年10月18日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号