假设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+点击链接或者自己复制链接到浏览器就可以打开了