VSCode搭建Vue项目过程

1、 首先安装nodejs

2、 安装vue-cli

vue-cli可以帮助我们快速构建vue项目

npm install -g vue-cli

运行结果

3、 安装webpack

webpack是js的打包工具

npm install -g webpack 

4、 创建vue项目

在vscode中，切换到保存项目的文件夹下，输入创建项目命令：

vue init webpack firstvue

firstvue为项目名称，可自行变更命名

接下来会出现一些配置项，可以根据需要配置，也可以选择默认配置，直接回车

等待依赖安装完成
一个基本的vue项目搭建完成。可以看到其目录结构如下

其中main.js为入口

5、 运行项目

切换到项目目录下cd firstvue，然后输入以下指令

npm run dev

运行成功之后，浏览器中打开http://localhost:8080，可看到如下界面

6、 项目打包发布上线

输入命令：

npm run build
完成之后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好了。