首先vue环境

迈不过友情╰ 2022-05-29 06:49 127阅读 0赞

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

## 第一步 node环境安装 ##

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

## 第二步 node环境检测 ##

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

![bVLBfp_w_286_h_86][]

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

![bVLBfG_w_287_h_244][]

1.2.1 在终端输入 node -v

![bVLBfN_w_287_h_244][]

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

![bVLBfP_w_287_h_244][]

## 第三步 vue-cli脚手架安装 ##

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

![bVLBfT_w_504_h_208][]

看到这样

![bVLBfU_w_504_h_184][]

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

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

![bVLBfY_w_280_h_124][]

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

![bVLBfZ_w_554_h_293][]

我们成功了

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

![bVLBf7_w_329_h_160][]

一直回车直到

![bVLBge_w_455_h_340][]

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

![bVLBgA_w_455_h_340][]

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

![bVLBgM_w_455_h_292][]

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

![bVLBgP_w_455_h_316][]

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

![bVLBgU_w_455_h_316][]

接下来 ctr+c 结束

2.5 进入 cd vue-demo

![bVLBg2_w_497_h_196][]

2.6 执行 npm install

![bVLBg4_w_497_h_196][]

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

![bVLBg5_w_497_h_340][]

2.7 接下来执行 npm run dev

![bVLBha_w_497_h_340][]

默认浏览器会自动打开

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

![bVLBht_w_554_h_466][]

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

[https_nodejs.org_en]: https://nodejs.org/en/
[http_nodejs.cn]: http://nodejs.cn/
[https_git-for-windows.githu...]: https://git-for-windows.github.io/
[bVLBfp_w_286_h_86]: /images/20220529/ac047d7228a7430caabd0f8613b261df.png
[bVLBfG_w_287_h_244]: /images/20220529/433c4085fbb24343b807f032af757f39.png
[bVLBfN_w_287_h_244]: /images/20220529/ef42e9527d73431b93942375445d2074.png
[bVLBfP_w_287_h_244]: /images/20220529/e194791672a1409bb52e6ac13d73d93d.png
[https_npm.taobao.org]: https://npm.taobao.org/
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org/
[bVLBfT_w_504_h_208]: /images/20220529/97d299d4431142c88f3d6692218a8a19.png
[bVLBfU_w_504_h_184]: /images/20220529/3cf82b5d57084c8ba440827d582005cf.png
[bVLBfY_w_280_h_124]: /images/20220529/24060e5f8601438cbda23b6d4e0b2778.png
[bVLBfZ_w_554_h_293]: /images/20220529/8f1a2be7662a4dbc86bc08dac1a4770d.png
[bVLBf7_w_329_h_160]: /images/20220529/664fb3bc56994492a680c91cbd72785c.png
[bVLBge_w_455_h_340]: /images/20220529/f710a67de21344e7893f8a7c5d7c8ae0.png
[bVLBgA_w_455_h_340]: /images/20220529/7275deda4258423c811855f36c0ed8ce.png
[bVLBgM_w_455_h_292]: /images/20220529/041c33485e354ba4be0f4ca6fd1c763c.png
[bVLBgP_w_455_h_316]: /images/20220529/f1b2d15fd7674bf98261d31b881f4641.png
[bVLBgU_w_455_h_316]: /images/20220529/3416d606dfa34d6ebaa3468cd2a187e4.png
[bVLBg2_w_497_h_196]: /images/20220529/a6e2773b9e234d0b9eb94ec9c756f7fe.png
[bVLBg4_w_497_h_196]: /images/20220529/159e164972b94364b93ebc749e3dfef5.png
[bVLBg5_w_497_h_340]: /images/20220529/6acb74a81b114c1cade702bc57a5397c.png
[bVLBha_w_497_h_340]: /images/20220529/abf10194a9554c6198e0807ae67c77af.png
[bVLBht_w_554_h_466]: /images/20220529/f6da3b3e26e548f3b51fcd8309a18f63.png