第一步 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...
安装成功后 右键菜单

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

1.2.1 在终端输入 node -v

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

第三步 vue-cli脚手架安装

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

看到这样

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

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

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

我们成功了

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

一直回车直到

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

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

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

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

接下来 ctr+c 结束

2.5 进入 cd vue-demo

2.6 执行 npm install

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

2.7 接下来执行 npm run dev

默认浏览器会自动打开

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

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

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

手把手教你搭建 vue 环境的更多相关文章

  1. 转载:手把手教你搭建 vue 环境

    以下内容转自: https://segmentfault.com/a/1190000008922234 第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安 ...

  2. 【MIT6.S081/6.828】手把手教你搭建开发环境

    目录 1. 简介 2. 安装ubuntu20.04 3. 更换源 3.1 更换/etc/apt/sources.list文件里的源 3.2 备份源列表 3.3 打开sources.list文件修改 3 ...

  3. 手把手教你搭建Pytest+Allure2.X环境详细教程,生成让你一见钟情的测试报告(非常详细,非常实用)

    简介 宏哥之前在做接口自动化的时候,用的测试报告是HTMLTestRunner,虽说自定义模板后能满足基本诉求,但是仍显得不够档次,高端,大气,遂想用其他优秀的report框架替换之.一次偶然的机会, ...

  4. 庐山真面目之十一微服务架构手把手教你搭建基于Jenkins的企业级CI/CD环境

    庐山真面目之十一微服务架构手把手教你搭建基于Jenkins的企业级CI/CD环境 一.介绍 说起微服务架构来,有一个环节是少不了的,那就是CI/CD持续集成的环境.当然,搭建CI/CD环境的工具很多, ...

  5. 大数据江湖之即席查询与分析(下篇)--手把手教你搭建即席查询与分析Demo

    上篇小弟分享了几个“即席查询与分析”的典型案例,引起了不少共鸣,好多小伙伴迫不及待地追问我们:说好的“手把手教你搭建即席查询与分析Demo”啥时候能出?说到就得做到,差啥不能差人品,本篇只分享技术干货 ...

  6. 手把手教你搭建FastDFS集群(下)

    手把手教你搭建FastDFS集群(下) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u0 ...

  7. 手把手教你搭建FastDFS集群(中)

    手把手教你搭建FastDFS集群(中) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u0 ...

  8. 手把手教你搭建FastDFS集群(上)

    手把手教你搭建FastDFS集群(上) 本文链接:https://blog.csdn.net/u012453843/article/details/68957209        FastDFS是一个 ...

  9. 手把手教你搭建 ELK 实时日志分析平台

    本篇文章主要是手把手教你搭建 ELK 实时日志分析平台,那么,ELK 到底是什么呢? ELK 是三个开源项目的首字母缩写,这三个项目分别是:Elasticsearch.Logstash 和 Kiban ...

随机推荐

  1. SQL基础学习_03_数据更新

    数据的插入 1. 基本INSERT语句     INSERT的基本语法为:     INSERT INTO  <表名> (列1, 列2, 列3,  -) VALUES (值1, 值2, 值 ...

  2. Extjs入门-grid

    function rowdblclickFn(grid, rowIndex, e){//双击事件              var row = grid.store.getById(grid.stor ...

  3. NestedScrollingParent, NestedScrollingChild 详解

    之前听同事提起过 NestedScrollingView,但是一直没有时间去了解,最近一段时间比较空,才开始去了解.先点开,看 NestedScrollingView 源码: public class ...

  4. Android OpenGL ES 入门系列(二) --- 环境搭建

    转载请注明出处 本文出自Hansion的博客 本章介绍如何使用GLSurfaceView和GLSurfaceView.Renderer完成在Activity中的最简单实现. 1.在AndroidMan ...

  5. 【图文】如何在centos上安装tomcat

    先到tomcat官网下载安装包(随便下载你想要的版本) 假设你现在使用的是windows系统 那么就把你下载来的压缩包解压,放到一个目录中 在你本地的windows系统中安装个xshell和xftp ...

  6. 关于Tsung脚本无法停止的问题

    最近,利用tsung测试cm的时候,脚本是这样配置的: <load> 28 <arrivalphase phase="1" duration="2&qu ...

  7. 【转载】小结一下linux 2.6内核的四种IO调度算法

    在LINUX 2.6中,有四种关于IO的调度算法,下面综合小结一下: 1) NOOP NOOP算法的全写为No Operation.该算法实现了最最简单的FIFO队列,所有IO请求大致按照先来后到的顺 ...

  8. dict-命令行下中英文翻译工具

    命令行下中英文翻译工具(Chinese and English translation tools in the command line) 安装(Install) ubuntu 安装 pip sud ...

  9. CentOS 7 如何设置默认启动方式为命令行模式

    1.首先需要有GUI图形界面,没有进安装 yum groupinstall "GNOME Desktop" "Graphical Administration Tools ...

  10. 洛谷 P1967 货车运输

    洛谷 P1967 货车运输 题目描述 A 国有 n 座城市,编号从 1 到 n,城市之间有 m 条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q 辆货车在运输货物, 司机们想知道每辆车在 ...