VUE前端开发流程笔记

一、基本概念：

• 1、nodejs：是一个基于 Chrome V8 引擎的 JavaScript 运行环境，即运行js的服务器；
• 2、npm：nodejs的包管理工具，类似java的maven
• 3、webpack：一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起,打包后的文件用于在浏览器中使用。

二、前期准备工作

1、安装npm环境;
2、下载vue-element-admin模板，地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD ；
3、将vue-element-admin解压缩，npm install 下载依赖包，npm run dev 运行测试环境，登录页面弹出。
 

三、登录改造

1、.env.development文件中修改“VUE_APP_BASE_API”参数(改为自己后台服务请求地址与端口)，；

2、修改login请求服务地址（src/api/user.js），换成自己后台controller中登录的请求地址：

返回的参数样式可参照mock里面的数据

四、业务功能开发流程
1、添加菜单路由，参考现有菜单复制修改；

2、在views目录下创建vue页面，
1）vue页面存放的目录地址在/router/index.js中配置的，类似：
2）在src/api/目录下创建js文件，定义接口地址和参数，类似如下：

3）在vue页面中引入/api/**.js文件，调用方法实现，vue页面的代码大致有如下几个部分：

 //1、element-ui code
<template>
     <div class="app-container">
     </div>
</template>

//2、vue code
<script>
import  {} from '@/api/article'
export default {
    data(){return{}},
    created(){},
    methods:{}
}
</script>

//3、style code
<style>
</style>