VScode搭建Vue环境（2）

目录

1、全局安装下载vue-cli

 2、创建项目

（1）、命令行创建

（2）、GUI创建 

3、如果无法在终端打开​请看下方图片：

 方法1：

 方法2：

---

在上一篇文章中我们下载安装并配置好了nodejs。并可以在全局环境中下载其他包。

接下来我们进行Vue环境配置

(1条消息) vue标准化_名微的博客-CSDN博客

1、全局安装下载vue-cli

Vue CLI 安装_w3cschoolm

命令行输入指令：

下载：

为了加快npm的下载速度，可以更换npm的registry为国内镜像，或者下载cnpm使用cnpm，使用 cnpm 命令来下载安装淘宝镜像上的 npm 包，而不必修改 npm 的 register。

修改下载源：

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

下载指令：

npm install -g @vue/cli

查看版本： 

vue --version 

使用GUI创建项目

vue ui 

下载好vue的脚手架之后，如果出现报错：'无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称' 或 'vue不是内部或外部命令'

在终端输入以下指令：

 输入：get-ExecutionPolicy
显示：Restricted
输入：set-ExecutionPolicy RemoteSigned
显示：RemoteSigned

然后重新以管理员的身份重启命令行窗口即可使用vue命令。

在vscode中的解决办法是：

在vscode的终端中输入

get-ExecutionPolicy
查看执行策略，如果为Restricted，那么需要修改

用管理员身份运行power shell

在终端中输入Set-ExecutionPolicy RemoteSigned

修改当前终端的执行策略，重启vscode既可以正常使用vue命令

 2、创建项目

参考：(9条消息) 使用vue创建项目的详细步骤_幸运小男神的博客-CSDN博客_创建vue项目的步骤

（1）、命令行创建(使用管理员身份运行)

创建一个文件夹用来存放vue项目：

命令行cd切换到该目录下：

 

通过指令创建一个vue项目：

默认选择Vue3，点击回车：

 

 创建完成

我们可以通过这两个指令进行 *** 作：

 cd hello-world——切换到项目目录

npm run serve——执行项目

生成的本地网站我们复制粘贴到浏览器中打开即可：

也可以通过VScode在编译器中打开：

 通过main.js入口，在终端输入

npm run Server——即可出现网址

 效果如图

（2）、GUI创建 

在终端输入vue ui，进入项目管理器界面

点击创建并在此创建

 输入项目名，可以先不用上传git我们先测试一下

可以选择默认Vue3配置，也可以手动，我这里先选择手动

 功能暂时只选一个路由Router

 选择配置

先不保存预设

等待个十几秒就可以创建完成了

 也可以用vscode打开，方法同上。

3、如果无法在终端打开​请看下方图片： 方法1：

 方法2：

(13条消息) '无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称' 或 'vue不是内部或外部命令'（亲测有效）_爱吃水果和蔬菜丫的博客-CSDN博客_无法将vue项识别为cmdlet

​