SpringBootWeb 篇-入门了解 Vue 前端工程的创建与基本使用

**🔥博客主页： 【

❤感谢大家点赞👍收藏⭐评论✍**

文章目录

1.0 基于脚手架创建前端工程

基于脚手架可以快速的创建前端工程，让开发者可以更快速地开始实际开发工作。脚手架工具提供了一些预设的配置选项和常用的功能模块，开发人员可以根据项目需求选择适合的模板和插件，并生成一个完整的项目结构。

除了创建项目，脚手架工具还通常提供了一些命令来帮助开发人员进行开发、构建和部署等操作，例如启动开发服务器、打包代码、进行代码检查等功能，大大提高了开发效率。

1.1 基于 Vue 开发前端项目的环境要求

1）node.js：前端项目的运行环境。

2）npm：JavaScript 的包管理工具。

3）Vue CLI：基于 Vue 进行快速开发的完整系统，实现交互式的项目脚手架。

使用以下命令来全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，您可以通过以下命令来验证 Vue CLI 的安装是否成功：

vue --version

运行结果：

C:\Users\86187>vue --version
@vue/cli 5.0.8

1.2 前端工程创建的方式

1.2.1 基于命令的方式来创建前端工程

在命令框中输入：

vue create 项目名称

举个例子：

首先，在没有中文的路径下创建前端工程：

接着，输入 vue create 项目名称：

需要注意的是，包名中包含非 URL 友好字符，例如空格、特殊符号等，就会出现错误。npm 的包名必须是 URL 友好的，只能包含小写字母、数字和连接符（-）。如果包名中包含其他字符，就会触发该错误。还要注意的是，最后不需要用 “;” 结尾。

再接着，选择 Vue2 来创建前端工程项目：

最后出现以下结果，则说明创建成功了。

该路径下就会出现前端项目的文件夹。

1.2.2 使用图形化来创建前端工程

vue ui

举个例子：

首先在命令框中输入：vue ui

接着，就会跳转到以下网页：

点击 vue-project 下拉框，再点击 Vue 项目管理器：

再跳转到以下页面：

点击创建项目：

选择 Vue2 来创建：

最后，文件中就会出现 vue-project1 文件夹了。

1.3 启动、停止项目

使用 VS code 来启动项目：

在终端输入：npm run serve，这样前端工程就启动起来了。

control + 点击左键连接就可以进入前端网页了：

使用 control + c 来结束前端工程项目：

1.4 前端项目中的重点文件

1）node_modules：当前项目依赖的 js 包

2）assets：静态资源存放目录

比如说要展示的图片或者视频、音频之类的资源，都可以存放在该目录中。

3）components：公共组件存放目录

存放的公共的资源。这个文件夹中存放的是在整个应用中都会用到的通用性组件，比如按钮、输入框、模态框等。这些组件可以被多个页面或模块共享使用，有利于代码的复用和维护。

4）App.vue：项目的主组件，页面的入口文件

5）main.js：整个项目的入口文件

6）package.json：项目的配置信息、依赖包管理

7）vue.config.js：vue-cli 配置文件

配置项目中的信息。

比如说：前端项目启动后，服务端默认为 8080，很容易和后端 tomcat 端口号冲突。如何修改前端服务的端口号？

这就可以通过 vue.config.js 文件来配置前端端口号：

记得保存修改之后的信息，关闭前端服务之后，再来重新启动前端服务：

2.0 Vue 基本使用方式

2.1 Vue 组件

Vue 的组件文件以 .vue 结尾，每一个组件由三部分组成：

1）