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

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

码农世界 2024-06-21 后端 98 次浏览 0个评论

🔥博客主页: 【小扳_-CSDN博客】

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

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

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

文章目录

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

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

        1.2 前端工程创建的方式

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

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

        1.3 启动、停止项目

        1.4 前端项目中的重点文件

        2.0 Vue 基本使用方式

        2.1 Vue 组件

        2.2 文本插值

        2.3 属性绑定

        2.4 事件绑定

        2.5 双向绑定

        2.6 条件渲染

        2.7 Axios

        2.7.1 axiox 创建的 API 与配置代理

        2.7.2 使用 axiox.post() 方法来发送请求 

        2.7.3 使用 axios.get() 方法来发送请求

        2.7.4 vue 统一使用方式 - axiox

        2.7.5 完整代码


        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 项目名称

举个例子:

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

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

        接着,输入 vue create 项目名称:

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

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

        再接着,选择 Vue2 来创建前端工程项目:

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

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

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

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

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

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

vue ui

举个例子:

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

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

        接着,就会跳转到以下网页:

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

        点击 vue-project 下拉框,再点击 Vue 项目管理器:

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

        再跳转到以下页面:

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

        点击创建项目:

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

        选择 Vue2 来创建:

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

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

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

        1.3 启动、停止项目

        使用 VS code 来启动项目:

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

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

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

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

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

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

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

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

        1.4 前端项目中的重点文件

        1)node_modules:当前项目依赖的 js 包

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

        2)assets:静态资源存放目录

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

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

        3)components:公共组件存放目录

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

        4)App.vue:项目的主组件,页面的入口文件

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

        5)main.js:整个项目的入口文件

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

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

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

        7)vue.config.js:vue-cli 配置文件

        配置项目中的信息。

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

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

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

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

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

        2.0 Vue 基本使用方式

        2.1 Vue 组件

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

        1)