手把手教你搭建 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)


相关推荐

  • Protel 99 SE 的坑

    Protel 99 SE 的坑作为一个电子爱好者,以前画电路图基本都是用笔在草稿纸上面直接画出电路图,然后焊板子~呵呵,有点简单粗暴,这样做的好处就是比较顺手,没那么多限制,但是EDA还是有必要学一下的,思来想去,还是学学Protel99se吧,第一次接触,各种懵比,还犯了许多低级错误,以及系统不兼容的坑,苦逼了…>>>坑1:添加元件库添加元件库:add/Remove选择sch路径点击ddb文件-add

  • maven中jar和war的区别

    maven中jar和war的区别jar文件包括java普通类、资源文件和普通文件,在maven中即是打包src/main/java和src/main/resources资源文件夹下的所有文件。在打包的时候会自动生成MATA-INF文件夹,用于存储maven的pom信息和MANIFEST.MF文件。例如:war文件包含全部的web应用程序,即所有的java类,配置信息和jsp、js等静态资源。但是需要注意war

  • a8三星手机android,三星a8手机参数和测评介绍[通俗易懂]

    a8三星手机android,三星a8手机参数和测评介绍[通俗易懂]手机已经成为我们生活中不可缺少的一部分,手机不仅可以发信息,打电话,还可以转账,开店,视频,好的手机不仅可以让你用的舒心,还不容易损坏。现在市场上,各种各样的手机比比皆是,价格也都高低不一,iPhone,索尼,华为,小米,三星都是消费者求追的对象,那么,你是否了解过GalaxyA8这一款手机呢?它的价格,性能究竟又究竟怎报价价格:1699元(价格来源网络,仅供参考)参数:GalaxyA8…

  • Matlab画图常用的线条符号、颜色

    Matlab画图常用的线条符号、颜色线型说明标记符说明颜色说明-实线(默认)+加号符r红色–双划线o空心圆g绿色:虚线*星号b蓝色:.点划线.实心圆c青绿色x叉号符m洋红色s(square)正方形y黄色d菱形k黑色^上三角形w白色v下三角形>右三角形<左三角形p(pentagram)五角星h(hexagram)六边形square正方形pentagram…

  • 数据挖掘十大经典算法

    数据挖掘十大经典算法

  • windows cmd切换盘符_cmd如何切换到c盘其他文件

    windows cmd切换盘符_cmd如何切换到c盘其他文件win7cmd下切换到其他盘符cd-dd:\    (必须加-d)

发表回复

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

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