对于vue方面做项目时的理解

200 阅读3分钟

此文只是我个人对于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的回调中

13.目前为止,从后端数据库通过接口拿到的数据会显示在console.log中