欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

程序员文章站 2022-03-07 14:13:00
visual studio code中想要搭建vue的运行环境,该怎么操作呢?下面我们就来看看详细的教程。visual studio code(代码编辑器) v1.62.3 64位 中文免费绿色版类型...

visual studio code中想要搭建vue的运行环境,该怎么操作呢?下面我们就来看看详细的教程。

visual studio code搭建nodejs的开发环境

不会的朋友可以参考之前的文章《vs code怎么搭建nodejs的开发环境? vscode运行nodejs代码的技巧》。 

vscode搭建vue项目

npm使用国内淘宝镜像

在vscode终端控制台输入

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

验证 

npm config get registry

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

安装vue-cli工具

将之前建立的node_global文件夹路径配置到path的环境变量内

再重启电脑

然后在vscode终端控制台输入

npm install -g @vue/cli

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

输入

vue --version

查看版本

提示

“vue : 无法加载文件 g:\编程\nodejs\node_global\vue.ps1,因为在此系统上禁止运行脚本。”

删除vue.ps1文件后

再次输入

vue --version

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

输入

vue create hello-world

按回车确认

创建一个vue项目

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

输入

cd hello-world
npm run serve

运行vue项目

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧vscode运行vue项目需要配置什么? vscode启动vue项目的技巧vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

使用快捷键ctrl+c

提示终止批处理操作吗(y/n)?

输入y

停止vue项目

vscode运行vue项目需要配置什么? vscode启动vue项目的技巧

以上就是vscode启动vue项目的技巧,希望大家喜欢,请继续关注。

相关标签: VSCode vue项目