安装vue的具体步骤

朴灿烈づ我的快乐病毒、 2024-03-26 12:18 66阅读 0赞

首先到官网下载一个node.js

官网地址为：[http://nodejs.cn/][http_nodejs.cn]

安装教程：

![7ee810fe878cefe39ef47f06ad81d760.png][]

![3a6226be0b0d712dbc5558b6859f90c5.png][]

![253e1fc5810c847c2880273751f19f01.png][]

![735cadaefcf852bc08dfbb0ecb3a470b.png][]

选Node.js.runtime和 Add to Path都可以，建议选Add to Path添加到环境变量。

![6087eb7e19d9f920cb887a2623f2e51f.png][]

这里不用勾选，直接下一步，就可以安装成功了

所有的步骤都是在命令窗口执行的

查看node安装的版本命名和npm命令为：

node -v
    npm -v

如果你需要安装cnpm**淘宝镜像加速器**可以使用一下命令：

//-g 就是全局安装
    npm install cnpm -g

安装之后你可以在此位置看到安装的一些资源

C:\\用户\\xxx\\AppData\\Roaming\\npm

![a5b4804bf5c795db6a5d82a5357b1990.png][]

如果你没有找到,那需要小调一下：

![c36de70a685a437592ca9c70be13c909.png][]

如果你还需要安装vue-cli的话，需要执行一下命令：

cnpm instal1 vue-cli-g
    #测试是否安装成功#查看可以基于哪些模板创建vue应用程序，通常我们选择webpack
    vue list

如果你还想用vue资源来创建一个vue项目的话在命令窗口输入此命令即可：

首先，进入你创建的的项目，用于存放vue项目

例如你放在了f盘，你需要**进入f盘**，然后再进入你创建的项目

![2c31e0b5fb11e5ca50f8a7dcf2331aa6.png][]

用命令的方式创建vue项目：

![7a126d6bdc7608c267b8b6b8e8e2130b.png][]

![00d3c44bb1173f4c1fcf0a29e7060d06.png][]

Vue build选则第一个，到了最后一个选项选择no即可，按自己需求来吧，按我这个的话就是可以直接体验vue，不然全部都是帮你创建好了的

最后再进去创建的目录，按照下面命令操作：

cd myvue
    npm install
    npm run dev

执行完最后一个命令出现了此界面，说明你安装成功啦

![80c2a02a2e068c972f723ff1ca2152db.png][]

可以ctrl点那个8080链接就可以打卡此界面：

![3897e4b4a602c4bb498d6980915d0eb8.png][]

[http_nodejs.cn]: http://nodejs.cn/
[7ee810fe878cefe39ef47f06ad81d760.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/19d274b090e84e7d94b2930357f35fb8.png
[3a6226be0b0d712dbc5558b6859f90c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/279ea8960a8942aab775aa41abee428d.png
[253e1fc5810c847c2880273751f19f01.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1f440f520c184b2b9b6113a3f4b2cc09.png
[735cadaefcf852bc08dfbb0ecb3a470b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d7d7645a758d470590decdd6411330b9.png
[6087eb7e19d9f920cb887a2623f2e51f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/49aba6ae716d4d7a8076764b326e9733.png
[a5b4804bf5c795db6a5d82a5357b1990.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5e537a95c39b43c3a9e3a8c5de7db007.png
[c36de70a685a437592ca9c70be13c909.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9b111d4046e74616b51cb8fc3ecb7b74.png
[2c31e0b5fb11e5ca50f8a7dcf2331aa6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/cf85a228b2774b24a854d37905a3e27d.png
[7a126d6bdc7608c267b8b6b8e8e2130b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/adbaba5b43db4b16a69a9c14dbc7c425.png
[00d3c44bb1173f4c1fcf0a29e7060d06.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/18d37271a718473a8606e1ec28736a12.png
[80c2a02a2e068c972f723ff1ca2152db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4e6572a995c343ff933844c929704121.png
[3897e4b4a602c4bb498d6980915d0eb8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/ca92922dac1a4488b902b893c5f1a3fa.png