前端新手新建Vue项目详细流程！

前端Vue框架开发流程

1、环境准备

• Vue-cli

  • 介绍： Vue-cli 是Vue官方提供的一个脚手架，用于快速生成一个 Vue 的项目模板。

  • Vue-cli提供了如下功能：

  • 统一的目录结构

  • 本地调试

  • 热部署

  • 单元测试

  • 集成打包上线

  • 依赖环境：NodeJS

终端输入：npm install -g @vue/cli

npm install -g @vue/cli

Nodejs（v16.20.0）：历史版本

2、Vue项目创建

终端输入：vue ui 打开创建项目的图形化界面

vue ui

图形化界面如下：

设置项目名，项目路径：

我这里选择手动配置：（为了设置router），下一步

勾选Router，下一步

勾选2.x版本，config选择第一个，然后就创建项目

可以选择设置模版，也可以不选择，看自己

创建完之后窗口就可以关掉了，然后在之前设置的文件夹就可以看到创建的Vue项目了。

这样一个Vue最初的项目就创建好了，然后在VScode中打开：

运行npm脚本，点击serve傍边的小三角就可以运行了，也可以项目终端输入命令执行：npm run serve，效果一样的

npm run serve

在浏览器输入：localhost：8080就可以访问了