项目流程

vue后台管理系统

开发流程

一、 安装环境

1.1 安装node

1.2 安装cnpm 或者 配置淘宝镜像源

1.3 安装vue脚手架

1.4 安装开发工具

1.5 安装postman

1.6 安装git

1.7 安装photoshop

1.8 …一些其他开发所需要的工具

二、使用vue脚手架创建项目

2.1 使用vue-cli创建项目

vue create 项目名称

2.2 选择默认安装依赖或者手动安装依赖

三、安装项目中所需要一些插件

3.1 安装axios

cnpm install axios --save

3.2 安装element-ui

cnpm install element-ui --save

3.3 …项目中所需要的插件

四、对项目进行基础配置

4.1 设置项目的title(浏览器窗口的标题)

4.2 设置浏览器窗口项目的小图标(ico)

4.3 引入elment-ui,并进行测试

4.4 在vue.config.js文件中对项目进行一些基础的配置

4.4.1 项目启动的端口号

4.4.2 是否自动打开

4.4.3 设置是否开启https

4.4.4 设置主机名称

4.4.5 关闭eslint

4.5 在vue.config.js文件里面配置跨域

4.5.1 在src目录下创建.env.development文件

• 配置代理的名称

  VUE_APP_BASE_API = "开发模式下的代理名称(/dev-api)" 
  

• 配置代理的地址

  VUE_APP_SERVICE_URL = "要代理的接口地址"
  

4.5.2 在src目录下创建.env.production文件

• 配置代理的名称

  VUE_APP_BASE_API = "生产模式下的代理名称(/pro-api)"
  

4.5.3 在vue.config.js文件内给proxy属性设置代理

自己去写

五、封装项目的API接口

5.1 封装axios的请求配置

5.1.1 在src目录下的utils目录下创建request.js

5.1.2 对axios进行配置

• 引入axios
• 创建axios的实例
• 配置请求拦截
• 配置响应拦截
• 导出axios实例对象

5.2 封装API接口

• 可以把所有的接口放到一个文件
• 安装模块的方式去对接口进行划分与对应封装

5.3 在组件内则是接口能否调用成功

5.3.1 在script标签内导入封装的api接口文件

5.3.2 在生命周期里面调用封装的接口方法

六、根据设计图划分组件,在项目中创建页面级组件

七、配置页面(组件)的路由

八、开发登录页面

九、配置页面鉴权

9.1 所有页面的鉴权

9.2 部分页面鉴权

十、开发主页

最后

以上就是干净可乐为你收集整理的项目流程项目流程vue后台管理系统的全部内容，希望文章能够帮你解决项目流程项目流程vue后台管理系统所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。