此文只是我个人对于vue操作步骤一些简单的理解,以及遇到的一些问题
1.对于刚进公司,需要下载项目并克隆到本地
首先需要查看package.json中,运行命令是什么 vue-cli-serve serve中的前标题是什么,它是可以更改的,每个公司可能都不同;
2.然后,在项目下打开终端
输入指令npm run install 目的是为了生成node_modules,如果错误的话,删掉整个 node_modules,在重新生成;
这时可能会出现问题,有一些包无法解析,安装失败,node.js的版本问题, 因此,我下载了一个nvm,并且下载了第二个node.js的版本进行切换,需要知道当前项目所需要的node.js的版本
这里我解释一下nvm,它是帮助我们管理node.js的一个工具,下载nvm后,此时你就可以通过nvm去下载node.js 的其他版本,因为对于不用的项目需要的node.js的版本时不同的,在我做项目时,这个项目本事需要一个低一点的node.js版本,而我安装的node.js版本是当时的最新版,这时有两个解决方案,其一就是卸载你电脑里当前的node.js版本,重新安装一个适合项目的;其二就是下载一个node.js版本管理工具,因此权衡利弊,毕竟以后总会用得到其他版本的node.js,所以我就下载了一个nvm,很好下载而且使用很方便。
3.下载npm run stall如果公司内网不带翻墙会很慢,可以使用淘宝镜像去下载
4.mock是本地化数据模拟的一个js工具,模拟假数据,不是真正的后端, 拦截一些数据请求,并做出一些假的东西给你
5.在src下进行开发
api:接口封装
assets:放一些资源文件或图片之类
components:公共组件库,一些自定义的公共组件,多个页面会使用
layout:布局拆分,布置
icons:放图标
router:配置路由
store:vuex style:放一些公共样式,可以使用scss
utils:放一些第三方工具,js文件
views:放页面,一个文件夹一个页面,子页面放文件夹里
6.当你在views中建好页面的时候
下一步需要在router中配置路由,使其出现在可点击的地方 同时,你配置的这个路由,可以带着组件的样式一起显示,组件应该是组件库中的, (例如则边栏,你写完这个路由后就自动放在左侧侧边栏里)
7.页面中一般都这样形式如下:
8.Element中的组件,样式等,都可直接放在vue框架中
9.env.development:
在VUE_APP_BASE_API中改总体的接口地址换为给你提供的接口地址,
改完后 需要重新启动运行, 这时会影响登陆的接口地址,无法登陆,
然后在login的user中做出假的登陆地址, 就是去掉之前的地址,在url只保留/login和/info
10.配置api获取后端信息:
先引入import, 然后写接口文档
export function levelList(){ return request({ url:'写接口文档中的接口地址' method:'get' }) }
11. 展示后端信息:
看你想在哪个页面中显示出来就在哪个页面中写js 在script的第一行引入写好的api,
使用解构赋值的方法:import{ 名字 } from 路径
12.搭好脚手架后,在请求后端数据库信息的时候可能会失败
这时我们要要看一下utils中的request.js中是否有响应拦截 我们需要删除它所设置的响应拦截
所谓响应拦截,就是在成功后进行一些条件的限制,自定义的状态码,不是网页请求的状态码, 不直接进入then的回调中