vue-cli全局安装

冷不防 2022-09-12 04:58 171阅读 0赞

### 一、安装node.js后检查是否安装成功 ###

node -v

npm -v

> node下载网址：http://nodejs.cn/download/  
> 注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；

### 二、Vue-cli全局安装 ###

a)、因为在国内npm安装会比较慢，所以这里推荐一下先安装淘宝镜像（官网：http://npm.taobao.org；）
    
    b)、在控制台执行命令：npm install cnpm -g --registry=https://registry.npm.taobao.org
    
    c)、安装完成就可以使用cnpm来代替之前的npm这样的安装效率会快很多（以下操作会由cnpm代替npm）
    
    d)、操作完以上步骤可以在继续在命令行输入：cnpm install -g vue-cli。安装成功之后输入vue按下回车出现如下图表示安装正确

![在这里插入图片描述][2c8a7c54eac24df4a0a4edaa6e311fa6.png]

### 三、初始化项目 ###

a)、继续在命令行输入：vue init webpack myproject(*myproject为自己的项目名称)
    
    执行了此命令会自动构建一个myproject文件夹，整个初始化流程如下图：

![在这里插入图片描述][d86728d7fdfe4dd5a2576a0bf525393d.png]  
**项目初始化完成之后按照命令行提示：**  
![在这里插入图片描述][4c11519322ec434c9aad6e5603ed9055.png]

cd myproject
    
    cnpm run dev
    
    以上两个命令执行完成会在命令行出现一个地址：

![在这里插入图片描述][a706b1b8acb84c3a89e8bc3dba916821.png]  
copy地址在浏览器中打开如图：  
![在这里插入图片描述][de79eb28b1804e14a006143e23f515c7.png]

在浏览器看到这个界面的时候证明咱们的项目已经安装，并且启动成功，接下来可以进行代码的书写操作了
    
    结语：vue的目录结构，以及每个目录的用法我会在下一篇文章中进行详细说明，希望大家多多支持，你们的支持是我前进的动力

[2c8a7c54eac24df4a0a4edaa6e311fa6.png]: /images/20220828/285d744793364779a6660774c9023552.png
[d86728d7fdfe4dd5a2576a0bf525393d.png]: /images/20220828/e0782a9086d74f7097b0b34ba991419e.png?
[4c11519322ec434c9aad6e5603ed9055.png]: /images/20220828/d8d8e920fb794918bb9e866680f4586a.png?
[a706b1b8acb84c3a89e8bc3dba916821.png]: /images/20220828/c6c7f214af3947049f7d581b4a09a9bf.png
[de79eb28b1804e14a006143e23f515c7.png]: /images/20220828/88e71ad580bc451dbed199042c74bc3e.png