VSCode创建自己的第一个vue项目

确保电脑安装好了Node.js，官网地址：https://nodejs.org/en/（安装教程很多，按步骤来即可），将npm配置到系统变量的path目录下。

查看自己电脑是否安装成功，可以命令行输入npm -v 查看一下。如下图：

 

然后安装好VSCode，官网下载：https://code.visualstudio.com/

 

打开VSCode的终端：全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。

npm install -g vue-cli

安装webpack，它是打包js的工具

npm install -g webpack 

安装完成后就可以创建我们的VUE项目了：

创建命令：

vue init webpack XXX(我们的项目名称)

注意：项目名称不能有大写字母，否则会报下面的错误

报错Sorry, name can no longer contain capital letters

然后就是一些vue的配置项，全部确定按enter回车键即可。创建完成后再左边就会出现我们的项目目录结构了。

运行我们的vue项目：

打开我们的项目结构，找到config目录下的dev.env.js文件，鼠标右键，选择在终端打开

运行vue项目的命令：等待运行结束会提示项目打开的地址（我的是默认的地址：http://localhost:8080）

npm run dev