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文件夹,里面就是打包之后的内容,直接部署就好了。