【java+vue】前后端项目架构详细流程

前端

1.创建vue项目

需要工具：node、Vscode

1.在磁盘上创建文件（web），并移到Vscode的工作区

2.进入该文件的终端

3.检测node和vue是否正常，若不显示版本号，则自行下载

4.生成vue

        1.执行命令：vue create project

        

        按空格选择，回车则进行下一步

保存本次配置（y）

   取个合适的名字，下次创建vue的时候就可以选择这个名，会默认使用这次的配置

等待下载。。。。。下载完成如下如图所示     

2.启动项目

1.启动项目（要进入到对应的vue项目才可以启动）

2.访问链接

3.终端执行ctrl + c关闭

3.构建页面

3.1.启动原理

1.main.js

这个文件是项目启动的主入口，里面最重要的参数就是router

2./router/index.js

3.2.构建自己的网页

这里使用element插件

1.下载插件

npm i element-ui -S 

2.在main.js文件中引入插件

1. /*引入如下组件*/

2. import ElementUI from 'element-ui';

3. import 'element-ui/lib/theme-chalk/index.css';

4. Vue.use(ElementUI);

3.在src/views下创建Login.vue和TestView.vue文件

Login.vue

 

     

     

     

       

         

           

         

       

       

         

           

         

       

       

         

            登录  

           

       

     

     

 

 

import VueRouter from 'vue-router'

  export default {  

    data() {  

      return {  

        form: {  

          name: 'hgf',  

          password:'123456'  

        }  

      }  

    },

 

    methods : {  

        //登录成功了，就修改URL，然后就会进行跳转到指定的页面

        login : function () {  

          this.$router.push({path:'/test'});  

        }  

    }  

  }  

 

 

 

TestView.vue ，点击登录之后我们就跳转到这个页面

 

  默认按钮