weixin_46315812

2021-01-06

项目从0开发的流程

Arrange? 2021-01-04 14:40:25 319 收藏

最后发布:2021-01-04 14:40:25 首次发布:2021-01-04 14:40:25

版权

开发一个项目，首先我们要看项目开发的文档，有哪些要求。

文章目录

1、创建项目
vue create 项目名
根据vue脚手架快速搭建项目，好用又便捷
2、根据项目要求安装axios vant-ui element-ui
vant-ui应了当前客户的审美观
3、封装axios、和api接口。
在根目录下创建文件分别是：
.env.development

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

      
        
        
        
        
      
        
        
        
        
         
         
         
         1
         
         
         
         2
         
         
         
         3

.env.production

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

      
        
        
        
        
      
        
        
        
        
         
         
         
         1
         
         
         
         2
         
         
         
         3

.env.staging

NODE_ENV='staging'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

      
        
        
        
        
      
        
        
        
        
         
         
         
         1
         
         
         
         2
         
         
         
         3

在项目的src文件里面创建env文件

env.development.js中搭配生产环境

//生产环境
module.exports = {
          
  title: 'vue-h5-template',
  baseUrl: 'https://www.365msmk.com/api/app', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

      
        
        
        
        
      
        
        
        
        
         
         
         
         1
         
         
         
         2
         
         
         
         3
         
         
         
         4
         
         
         
         5
         
         
         
         6
         
         
         
         7
         
         
         
         8

env.production.js中搭配开发环境

//开发环境
module.exports = {
          
  title: 'vue-h5-template',
  baseUrl: 'https://www.365msmk.com', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

      
        
        
        
        
      
        
        
        
        
         
         
         
         1
         
         
         
         2
         
         
         
         3
         
         
         
         4
         
         
         
         5
         
         
         
         6
         
         
         
         7
         
         
         
         8

env.staging.js搭配测试环境

//测试环境
module.exports = {
          
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:staging.9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

      
        
        
        
        
      
        
        
        
        
         
         
         
         1
         
         
         
         2
         
         
         
         3
         
         
         
         4
         
         
         
         5
         
         
         
         6
         
         
         
         7
         
         
         
         8

index.js中配置

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

      
        
        
        
        
      
        
        
        
        
         
         
         
         1
         
         
         
         2
         
         
         
         3

创建一个network文件

在config.js中统一管理接口

//配置接口
export const METHOD = {
          
  GET: "get",
  POST: "post",
  PUT: "put",
};

export const PATH = {
login: “/login”,
};

在core.js中创建axios实例并添加请求拦截器

import axios from "axios";
import {
     
  METHOD
} from "./config";
import {
     
  Toast
} from "vant";
import {
     
  baseUrl
} from "@/config";

console.log(baseUrl);
const instance = axios.create({
baseURL: baseUrl,
timeout: 5000,
});

// let loading = null;
// 添加请求拦截器
instance.interceptors.request.use(
function (config) {
config.headers[‘Authorization’] = ‘Bearer’ + localStorage.getItem(‘token’)
Toast.loading({
message: “加载中…”,
forbidClick: true,
loadingType: “spinner”,
});
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);

// 添加响应拦截器
instance.interceptors.response.use(
function (response) {
// 对响应数据做点什么
// loading.close()
// if (response.data.msg === “无效token”) {
// router.push({
// name: “login”,
// });
// }
return response;
},
function (error) {
// 对响应错误做点什么
return Promise.reject(error);
}
);

export function request(method, url, parmas) {
switch (method) {
case METHOD.GET:
return GET(url, parmas);
case METHOD.POST:
return POST(url, parmas);
case METHOD.PUT:
return PUT(url, parmas);
}
}
function GET(url, params) {
return instance.get(url, params);
}

function POST(url, params) {
return instance.post(url, params);
}

function PUT(url, params) {
return instance.put(url, params);
}

在index.js中引入config.js和core.js

import {
      METHOD, PATH } from "./config";
import {
      request } from "./core";

4、搭建项目需要的模块，比如登录模块，首页模块等等

整体阶段：需求分析、设计、编码、测试、维护。
需求阶段：通常定义系统的需求，明白系统的目标。
设计阶段：通常确定系统使用什么数据库，系统模块的划分，各个模块的功能。
编码阶段：用编程语言对设计阶段的实现。
测试阶段：分黑盒测试，白盒测试。测试系统的功能是否实现，是否准确。
维护阶段：是根据用户新的需要重新修改系统，使系统更加稳定，更符合用户的要求。
需求阶段：其工作是否到位是整个系…

  
		 
  插入表情
  
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    
  
  
			
				
			
			
			
			
			
			
				
					添加代码片
					
				
				
					HTML/XML
					objective-c
					Ruby
					PHP
					C
					C++
					JavaScript
					Python
					Java
					CSS
					SQL
					其它
				
			
			
						还能输入1000个字符
						“速评一下”



	
	                                    爱码士strive_day:写的很不错，感谢博主的分享，看懂了，又学会了新知识，奈斯！3小时前回复举报
                                    爱码士ITKaven:优秀优秀，必须给个大大的赞！3小时前回复举报

	
<
1
>

相关系统分析员向用户初步了解需求，然后用相关的工具软件列出要开发的系统的大功能模块，每个大功能模块有哪些小功能模块，对于有些需求比较明确相关的界面时，在这一步里面可以初步定义好少量的界面。
系统分析员深入了解和分析需求，根据自己的经验和需求用WORD或相关的工具再做出一份文档系统的功能需求文档。这次的文档会清楚列出系统大致的大功能模块，大功能模块有哪些小功能模块，…

免费报名：http://www.hdb.com/party/b8an2.html?hdb_pos=manager_info

在我转产品之前，虽然我混迹IT行业，做过实施和售前，也跟研发打过交道，但我一直都不知道一个软件是怎么开发出来的。直面客户，扛着压力，在对程序一无所知的情况下，很容易产生一些想法：为什么产品的结果是这样？为什么产品开

2 分析与设计
1 架构分析与设计
逻辑结构：
3层架构、多层架构。。。

略粗糙，供参考

项目开发流程

注：方框为项目流程步骤，实线箭头代表开发流程方向，虚线箭头代表两个步骤之间存在多次反复确认的过程。

流程图各环节点说明

业务调研
参与人员：产品经理、业务人员（或用户）

环节任务：产品经理了解业务人员提出需求的项目背景、方向，进行业务梳理，对项目功能阐述，制作思维导图等。

需求设…

项目成员：

项目经理1名：负责项目各个阶段的监管，同时兼任应用软件工程师

PM 1名：协助项目经理监管项目各个阶段，一般同时担任多个项目的PM

硬件工程师1名：负责硬件开发

逻辑工程师1名：负责逻辑模块开发

嵌入式工程师1名：负责嵌入式模块开发

应用软件工程师1名：负责PC控制软件开发，由项目经…

软件开发的一般流程

需求分析及确认：
由需求分析工程师与客户确认甚至挖掘需求。输出需求说明文档。
概要设计及详细设计：
开发对需求进行概要设计，包括系统的基本处理流程，组织结构、模块划分、接口设计、数据库结构设计等。然后在概要设计的基础上进行详细设计。详细设计中描述实现具体模块所涉及到的主要算法、数据结构、类的层次结…

召集需求涉及到的UI、开发、产品、测试人员整理业务流程，同步信息，明确分工
明确需求目的，考虑当前需求设计是否可满足目的
整理流程中如果涉及的其他人员，则召集商讨
如需求设计上影响现有业务功能，应要求产品重新设计实现方案，然后重新评审

1.2 注意事项

业务流程同步：评审后重新梳理流程，存在疑问处及时找产品…

图1：嵌入式软件开发流程

（1）创建工程项目：在配置硬件设备和安装软件开发工具后，就可以开始创建工程项目，通常需要选择项目文件的存储位置及目标处理器。

（2）添加项目文件：开发人员需要创建源程序文件，…

第一阶段

库/框架选型（暂定react）

第二阶段

简单构建优化
NPM管理包
node+webpack打包

第三阶段

JS、CSS模块化开发

第四阶段

组件化开发

开发过程当中注意：前端安全XSS CSRF攻击等后期文章中将讲述如何

Arrange? CSDN认证博客专家 CSDN认证企业博客

码龄1年暂无认证

原创

34万+

周排名

66万+

总排名

524

访问

等级

积分

粉丝

获赞

私信

关注

2021-01-06

项目从0开发的流程

文章目录

热门文章

最新评论

最新文章

你可能感兴趣的:(2021-01-06)