【VUE入门】web前端之VUE项目实战开发流程_前端vue项目开发流程及架构

文章目录

一、拿到项目

二、创建Vue项目

1、外部终端创建

2、项目介绍

三、安装所需要的插件

四、前端开发流程

1、创建结构以及进行编码

2、配置路由

3、运行项目

五、前后交互

六、项目上线

拿到项目

产品：在公司接到项目后，产品会和用户进行对接，确定用户需求，根据用户的需求，会画出原型图（原型图工具rp(Axure RP)）。

会议：需求将原型图整理完成之后,紧接着就开需求会议，参会人员包含(产品经理、项目经理、前端、后端、ui、测试等主要人员)，确认需求、了解项目业务、评估项目开发周期、以及将需求按梯度划分为(重点完成、二次迭代完成)，当对整个需求做完评估，那么接下来就到了开发的流程。

创建Vue项目

node环境

在创建项目之前，我们先要确定我们的node环境是否正常

执行 node -v 查看

如果不存在，报错：node不是内部或者外部命令，那么我们需要去安装node环境，选择长期稳定版本，建议版本14.16.0

如果存在,会提示版本号

我们来确定Vue环境是否存在

Vue环境

执行 vue -V 查看

如果不存在，报错：vue不是内部或者外部命令，那么我们需要安装Vue

// 执行命令npm install @vue/cli// 安装完成再去执行 vue -v

如果存在

那么接下来我们需要创建vue项目

创建Vue项目

1、外部终端创建

    a、打开vue项目文件目录，清除地址内容，输入cmd，然后回车

    b、执行vue创建命令

vue create demo // 创建项目

    c、选择自定义，根据我们所需要的进行配置（上下键进行替换，回车进行选中）

    d、选择Vue版本，回车

    e、一路回车，开始创建，创建好在编辑器打开

2、项目介绍

    我们项目的主要内容都在src下，所以我们主要看src下的文件

    assets: 存放静态资源，如：js、css、图片等

    components: 存放views公共组件

    router: 存放路由信息，用于页面跳转

    store: 存放数据，项目公共数据

    views: 存放页面组件，

    App.vue: 项目的公共出口页面

    main.js: 项目公共配置

安装所需要的插件

例如：后台管理系统

1、安装ui组件库、请求axios等还有其他的插件

npm install element-ui axios -D

2、在package.json中进行查看

3、在main.js中进行配置

import Vue from 'vue'// 引入依赖import ElementUi from 'element-ui'import 'element-plus/dist/index.css'Vue.use(ElementUi)

前端开发流程

1、开始编码

在views下创建组件，可以创建文件夹对组件进行管理

在组件中编写代码

2、配置路由

在router下的index.js进行路由配置

3、运行

执行npm run serve,成功后根据服务地址打开项目

前后交互

后端接口写好之后，将接口发布在swigger文档，前端根据文档了解后端的接口地址、请求方式、请求参数、以及后端返回值。

前端通过swigger对接后端接口，获取数据，然后去渲染页面，直至整个项目所有接口对接完成。

项目上线

前端接口对接完成，接下来就是打包上线，部署服务

后端将代码部署服务器之后，后端会给一个地址，这个地址就是后端接口地址，我们需要将地址配置在nginx服务器config的反向代理上，在axios的默认地址上填上代理名称，然后执行npm run build，打包完成后，把打包的文件通过xftp传送至服务器前端部分

将前端项目链接发给测试，进行项目测试，测试完成，有bug后使用禅道进行bug回滚，然后进行bug修改，改完之后重新部署，部署完成再次进行bug修改，完成后上正式服务器，这样前端的一套开发流程就完成了

以上就是前端项目实战之开发流程，希望对大家有所帮助。您的点赞、收藏、关注是我创作的动力。

万水千山总是情，点个