vue下载与安装详细教程

1、安装node（网址：https://www.bilibili/video/BV1LA411u7dE?t=10）

①、进入node官网https://nodejs/zh-cn/ 点击下载，选择适配的

②、
双击安装，安装路径随意，勾选第四项，把node添加进path

勾选，帮我们自动下载插件

③、在cmd中输入node -v，若出现版本号，则安装成功

④、如果npm包管理不想存放C盘的话，那就手动创建红框里的两个文件夹于安装路径中

https://developer.aliyun/special/mirrors/notice?from=tnpm

上一行网址可能会出现
，所以直接把下一行输入在cmd中

npm install -g cnpm --registry=https://registry.npm.taobao/

安装成功后在cmd里输入cnpm -v判断是否安装成功

⑤、设置成功后所有全局安装的包，都会放到node_global文件夹中

2、安装完node、cnpm后开始安装vue3脚手架

输入cmd命令语句时，如果之前安装过2.x，那么在后边加上-init，向下兼容2.x版本

安装完后判断是否成功

3、创建一个vue项目：

两种方式：①在cmd里输入命令行vue ui跳转到网页在进行操作

​ 网址https://www.bilibili/video/BV1Uy4y1E7qu?t=78

​ 只在vue3中才能实现

​ ②在idea里创造一个文件夹，在该文件夹目录的terminal 里输入vue create 项目名称，后续略

​ 网址https://www.bilibili/video/BV137411B7vB

​ 在vue2、vue3中均可实现

①：在cmd里输入vue ui（此后不能关闭cmd），跳转成功后，点击”创建”

选个想要的文件夹，双击进入，再点击创建

写入想要的名字，关掉初始化git仓库

点击下一步，选择手动

开启Router和Vuex，关闭Linter/Formatter（代码自动校验），下一步

打开历史记录，创建项目

点击创建项目，不保存预设

会发现页面在加载，cmd中在运行，漫长等待

npm config set registry https://registry.npm.taobao

设置完加速后效果非常显著：

创建完成

然后点击任务，再点击运行（这张图是已经点击运行后的，所以②处是停止）

当输出中出现两个蓝色地址说明运行成功了

在cmd里点击ctrl+c，就是退出，再点击y确认

但我们最终需要在idea中使用 vue，所以还需在idea中打开该项目。

注意点：vue的创建只能通过vue ui或终端，无法直接在idea的项目创建中创建，所以该方式①需要现在如上所述创造万一个项目的前提下，进入idea，找到创建好的项目，对其打开

（如何打开初始界面，百度搜索：怎样取消idea默认打开工程）

如果不是open or import选项，那就点击

找到之前创建的项目文件路径C:\Users\17813\VueProject\vuetest

成功打开后还需要在idea里安装插件，点击file，点击settings，再点击plugins

搜索vue，点击install

装完之后，重启idea，发现可以开发了

如果在main.js中的包引入部分报错，那就在settings里找到javascript，换成6就版本对应

在idea里如何启动vue：

打开terminal终端，输入npm run serve

点击红框里上部分的地址，跳转到如下页面说明启动成功

会发现一个问题，这个网页的布局排版与项目文件里的App.vue里的代码格式完全一致

想退出时在terminal里按键位ctrl + c