Javascript

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项目的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!