VUE项目开发的完整流程

前端VUE
文章目录
一、VUE环境搭建
二、创建VUE项目
1. 外部终端创建
2. IDea内部终端创建
3. 项目介绍
4. vue 的特别之处
三、添加前端开发插件依赖
四、前端开发流程
1. 创建组件与编码
2. 配置组件路由
3. 运行
五、前后端交互
一、VUE环境搭建
搭建VUE环境，可参考vue环境搭建
下载使用yarn，可参考yarn的安装和使用
二、创建VUE项目两种方式
1. 外部终端创建
在存储vue项目的目录，清除路径并输入cmd，回车，进入当前目录的命令行终端
创建vue项目
注意名称不可用大写英文
vue create demo_01
根据自己需要选择模式，这里我选择自定义模式
创建好的项目在IDea中打开即可
2. IDea内部终端创建
在IDea打开Termial，输入如下代码
vue create demo_01
选择模式，然后创建，创建完毕后，即可在左侧目录找到项目
3. 项目介绍
我们编程的内容主要在src文件夹中，目录介绍：
assets：用于存储页面显示的图片资源
components：views中的公共部分存储在此
router：存储路由信息，用于页面跳转
views：存储页面组件，是编程的重心
App.vue：个人理解就是普通首页，可以随意更改
main.js：整个vue项目的公共配置
4. vue 的特别之处
原始网页是Header+Body作为一个整体的开发，vue是将Header、Body作为单独组件分开开发，与封装的思路是一样的，所以现在不称为页面，称为组件。
三、添加前端开发插件依赖
打开vue项目，进入外部/内部终端，下载element
下载完成后即可在package.json中查看
修改公共配置文件main.js
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
// 引入依赖
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
var app=createApp(App)    
// 使用ElementPlus
app.use(ElementPlus)
app.use(router).mount('#app')
四、前端开发流程
1. 创建组件与编码
在views目录下创建组件
可创建文件夹进行分类管理
对组件进行编码
标签
template:可理解为Body部分，但template只能放置一个控件，如果需要放置多个控件，可以嵌套放在div控件中
script:JS脚本的部分
style:编写样式部分
<!--写页面内容的部分，与Body类似-->
<template>
    <div id="container">
        <h5>我的第一个组件</h5>
        <button>点击我看看</button>
    </div>
</template>

<!--写JS脚本-->
<script>
    export default {
        // 组件命名，必须存在
        name: "UserReg"
    }
</script>

<!--编写样式的-->
<style scoped>

</style>
2. 配置组件路由
引入组件
//先引入编写好的组件
import HomeView from '../views/HomeView.vue'
import UserReg from "@/views/users/UserReg";
import Hello from "@/views/Hello/Hello";
import Main from "@/views/main/Main";
配置路由
//  配置路径、名称、组件
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/userReg',
    name:'/UserReg',
    component:UserReg
  },
  {
    path:'/hello',
    name:'/Hello',
    component:Hello
  },
  {
    path:'/main',
    name:'/Main',
    component:Main
  }
]
import { createRouter, createWebHistory } from 'vue-router'
//先引入编写好的组件
import HomeView from '../views/HomeView.vue'
import UserReg from "@/views/users/UserReg";
import Hello from "@/views/Hello/Hello";
import Main from "@/views/main/Main";
//  配置路径、名称、组件
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/userReg',
    name:'/UserReg',
    component:UserReg
  },
  {
    path:'/hello',
    name:'/Hello',
    component:Hello
  },
  {
    path:'/main',
    name:'/Main',
    component:Main
  }
]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router
3. 运行
Termial上运行vue
VUE前后端分离之数据交互（简单项目作为演示）
前端VUE
一、添加后端访问依赖
二、建立后端
三、配置前端
这里重点演示前端如何访问后端
一、添加后端访问依赖
进入前端vue项目，进入内部或外部终端
输入如下代码并安装
cnpm install axios --save
cnpm install qs --save
安装好之后可以在package.json中看到添加的依赖
在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖）
引入依赖
设置别名
在组件文件中通过 this.$axios.xxx 等即可使用依赖
二、建立后端
后端的建立可参考基于 Spring Mvc 一个简单项目的基本流程 ＜用户注册功能＞(校正版)的第一、二步，建立符合自己前端的后端。
处理跨域问题 ：前后端分离开发后，前后端的访问最主要的问题即跨域，即对于http的请求，为了安全，禁止ip地址和不同端口的程序
项目访问，准确说仅可以访问但不响应。由于采用SpringBoot，所以通过在控制器中添加注解来解决。
三、配置前端
直接上前端的JS处代码
<script>
    export default{
        name:'Users',
        data() {
            return {
                emp:{
                    ename:'',
                    loSal:'',
                    hiSal:'',
                    deptno:'',
                },
                depts:[],
                emps:[],
                pageNum:1,//当前页
                pageTotle:0 ,//总条数
                pageSize:4   //每页显示几条
            }
        },
        methods:{
            // 定义页面加载方法(例如搜索按钮触发该事件)
            init(){
                // ###打包参数###
                this.emp.pageNum=this.pageNum;//JS中变量可以动态自动添加，可以不实现定义emp.pageNum
                this.emp.pageSize=this.pageSize;
                // 把json对象转为字符串
                var param=this.$qs.stringify(this.emp);// 将emp数据转为字符串，作为参数上传

                // ###参数传递、结果接收###
                this.$axios // 将参数上传到后台的服务器端口8088、访问路径/vue、以及控制器与方法的RequestMapping路由
                    .post("http://localhost:8088/vue/emp/findByParam",param) //参数传递
                    .then(rst => { // 结果接收
                        console.log(rst);//如果获取了结果就在控制台打印
                        // vue前端将返回的后端返回的结果用data封装，而rst是包含了data以及其他参数的总结果集合
                        this.emps = rst.data.list;
                        this.pageTotle = rst.data.total;
                    }).catch(ex => {
                        console.log(ex);//如果没获取结果，就打印错误
                    });
            },
            // 定义Search方法
            search(){
                // 即页面加载方法
                this.init()
            }
        }
    }
</script>