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项目

上一篇:vue项目化/模块化的开发方式与环境搭建(超基础且详细)


下一篇:【学习】es6实战+vue了解+vue安装