Visual Studio Code安装及环境配置

时间:2024-04-13 14:26:27

一、安装Visual Studio Code

在https://code.visualstudio.com/中下载,并且安装。
Visual Studio Code安装及环境配置

二、环境配置

1、首先安装node.js。
2、打开cmd,以管理员身份运行。在cmd中输入命令node - v,运行成功将显示node的版本。
Visual Studio Code安装及环境配置
3、安装淘宝镜像。
在cmd中输入指令:npm install -g cnpm --registry=https://registry.npm.taobao.org 。等待安装完成。
Visual Studio Code安装及环境配置
4、语言设置。
打开Visual Studio Code,安装配置:Chinese,更改语言设置:Ctrl+shift+p,输入configure display language
Visual Studio Code安装及环境配置
选择zh-cn,重启Visual Studio Code即更改成功。
Visual Studio Code安装及环境配置
5、选择路径文件夹,在集成终端中打开。
Visual Studio Code安装及环境配置
6、安装Vue脚手架。
(1)在终端中输入指令:cnpm install -g @vue/cli ,安装Vue脚手架,这时显示cnpm:无法加载文件,…,因为在此系统上禁止运行脚本等。
解决方案:在开始界面搜索Windows PowerShell,右击以管理员身份打开。
Visual Studio Code安装及环境配置
在打开界面输入指令:set-ExecutionPolicy RemoteSigned ,接下来输入A ,最后输入指令:get-ExecutionPolicy ,完成更改。
Visual Studio Code安装及环境配置
(2)输入cnpm install -g @vue/cli,等待安装完成。
(3)再输入:cnpm install -g @vue/cli-init初始化。等待。
7、创建项目。
输入:vue init webpack 项目名称;
或者输入:vue init webpack-simple 项目名称 创建简单版项目环境。
安装完成左侧边栏显示:
Visual Studio Code安装及环境配置

8、在src文件下打开App.vue。 即可编辑代码。
Visual Studio Code安装及环境配置
9、右击在集成终端中打开,在终端中输入 : cnpm run dev ,等待加载。加载完成显示:
Visual Studio Code安装及环境配置
10、Ctrl+单击打开地址即可。