vue的环境搭建2023，idea,vscode踩坑记录

由于看了19、20年的几篇博客，导致搭建vue环境一部分环节出大问题。
大家还是看官方文档吧，血泪教训。
不说废话直接开始

1.nodejs下载

下载地址：https://nodejs.org/zh-cn/
下载稳定版

安装过程我是一路next,就是安装路径改掉就好了

2.检查nodejs安装情况

WIN+R打开cmd,输入

node -v

npm -v

显示版本号就是成功了

3.用idea或者vscode创建项目

3.1idea

用idea的话看情况，可以创建一个空项目，然后在项目结构里面新建一个模块，有stacic web就导入这个，没有的话就直接导入web

不显示没有没关系，idea2021把javascript模块里的javascript选项和原本的static web模块都放在web里面了

3.2 VScode

这个简单，新建一个空文件夹。但比idea多一步，就是要在vscode桌面图标上，右键一下

兼容性里面，以管理员身份运行，然后重启电脑吧。

4.打开项目终端

重启之后，首先在终端PowerShell里输入

get-ExecutionPolicy

如果不是RemoteSigned，那就输入下面的命令

set-ExecutionPolicy RemoteSigned

少了这一步可能会出现无法读取某某模块的问题，因为权限不够
在idea里直接打开终端

在vscode里面就用ctrl+~打开终端，但是要注意一下打开的是powershell还是cmd

建议CMD哈

我直接在本地cmd(管理员)演示了哈

5.对项目操作

1.首先要切换淘宝镜像

npm i -g cnpm --registry=https://registry.npm.taobao.org

这个就是因为npm下载慢，所以用cnpm代替掉

2.安装脚手架vue-cli

cnpm i @vue/cli

一定一定按我的这个写，我之前就是用的 npm i -g vue-cli
寄掉了，因为它只支持vue2.x,现在这个命令下载的新脚手架是2、3都支持的，全局下载也可以，自己定义好安装路径就行，网上有教程。我自己是直接安装在默认路径的，也就是C:\users\用户名\AppData\Roaming\npm\node_modules
安装完就去路径里看看
这个文件夹里跟我一样那就没有问题

然后安装webpack

cnpm install -g webpack

注意4.0版本之后还要装个脚手架webpack -cli

npm install webpack-cli -g

到这就差不多了
最后一步，打开cmd vue -V

就算成功，但是如果只显示了一个版本号，例如2.9.6，而不是@vue/cli***,那么恭喜你，遇到了我之前的坑，就是脚手架版本的问题，没猜错你用的命令是

~~npm i -g vue-cli~~ 如果这样你就到C盘里找到vue-cli文件夹直接删掉然后运行cnpm i @vue/cli的命令就好，问题不大

OK安装完毕
**

补充*****************************************************************

有小伙伴用我这个命令安装的node_modules文件夹在自己新建的空文件夹下而不是默认的C盘路径，然后vue -V失败了
他是下载好了vue-cli的，下图

但是

解决办法：node_modules文件夹里搜索 vue.cmd文件，然后右键打开文件位置，把它的文件路径添加到环境变量path里面就OK了。亲测的。有效。

6.开始创建项目

**
在编译器终端里，cd 进要创建项目的文件夹，然后

vue create ceshi    //（ceshi，写自己的项目名字）

他会让你选vue版本，我就直接3了，回车就行

然后就是短暂地等待

创建好之后长这样

跟提示走呗那就,先cd,然后就npm run巴拉巴拉的
cd ceshi3
npm run serve
但是先给大伙看看目录结构吧

着重看看node_models里面是不是空的

后面是正常流程

把网址复制一下

7.ok!

欧克！