VSCode配置Vue项目

本文主要是介绍VSCode配置Vue项目，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

假设Vscode、nodejs已经安装好了

Vscode的前端配件推荐大家搜一下已经有很多整理好的啦
如果在cmd窗口运行 node -xxx 命令，提示 'node' 不是内部或外部命令，也不是可运行的程序或批处理文件，说明环境变量没有配置正确，可以参考这篇

开始配置

打开VScode的终端，调出命令输入框。
先安装vue-cli，输入以下命令后回车，等待安装完成。有可能会出现安装失败的问题多试几次应该ok的

npm install -g vue-cli

再安装webpack，一个打包js的工具，和刚刚一样输入以下命令后回车等待安装完成

npm install -g webpack 

配置完成，创建项目

命令如下：
创建项目命令:

vue init webpack xxx

这个xxx是项目名称，改成自己的项目名称就行
接着会出现一些配置项，根据需要进行配置，也可以直接按回车使用默认配置
然后继续等待安装完成之后，一个基本的vue项目就自动搭建完了，可以看文件目录开始后面啦，其中main.js就是入口

运行调试

html和vue在VSCode中是不能直接点击小三角运行的

html

html要下载open in browser插件，然后使用插件打开（快捷键：Alt + B使用默认浏览器打开，可以在setting里设置，Shift + Alt + B是选择浏览器打开）

vue

先cd到项目文件夹(xxx就是刚刚上面自己取的项目名称）

cd xxx

然后运行以下命令

npm run dev

成功以后会显示，然后ctrl+点击链接或者自己复制链接到浏览器就可以打开了

这篇关于VSCode配置Vue项目的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！