VUE项目开发的完整流程

傷城~ 2023-09-30 08:49 6阅读 0赞

#### 文章目录 ####

*  一、VUE环境搭建
 *  二、创建VUE项目
 *   *  1. 外部终端创建
     *  2. IDea内部终端创建
     *  3. 项目介绍
     *  4. vue 的特别之处
 *  三、添加前端开发插件依赖
 *  四、前端开发流程
 *   *  1. 创建组件与编码
     *  2. 配置组件路由
     *  3. 运行
 *  五、前后端交互

--------------------

`提示：本文是VUE项目开发的流程梳理，是对本专栏博客的梳理`

## 一、VUE环境搭建 ##

1.  搭建VUE环境，可参考[vue环境搭建][vue]
2.  下载使用yarn，可参考[yarn的安装和使用][yarn]

## 二、创建VUE项目 ##

这里只介绍其中我所熟知的两种方式

### 1. 外部终端创建 ###

1.  在存储vue项目的目录，清除路径并输入cmd，回车，进入当前目录的命令行终端  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]
2.  创建vue项目  
    注意名称不可用大写英文
    
        vue create demo_01
    
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 1]
3.  根据自己需要选择模式，这里我选择自定义模式  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 2]
4.  创建好的项目在IDea中打开即可

### 2. IDea内部终端创建 ###

1.  在IDea打开Termial，输入如下代码
    
        vue create demo_01
    
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 3]
2.  选择模式，然后创建，创建完毕后，即可在左侧目录找到项目  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 4]

### 3. 项目介绍 ###

我们编程的内容主要在src文件夹中，目录介绍：

1.  assets：用于存储页面显示的图片资源
2.  components：views中的公共部分存储在此
3.  router：存储路由信息，用于页面跳转
4.  views：存储页面组件，是编程的重心
5.  App.vue：个人理解就是普通首页，可以随意更改
6.  main.js：整个vue项目的公共配置

### 4. vue 的特别之处 ###

原始网页是Header+Body作为一个整体的开发，vue是将Header、Body作为单独组件分开开发，与封装的思路是一样的，所以现在不称为页面，称为组件。以前的衣服是一套一套地设计，外套、衬衫、裤子、鞋一起设计，成套的设计。vue是将外套、衬衫、裤子、鞋分开设计，然后再自由组合成一套衣服。

## 三、添加前端开发插件依赖 ##

1.  打开vue项目，进入外部/内部终端，下载element  
    ![在这里插入图片描述][13a4b3d14e9a473399941d894205a5e7.png]
2.  下载完成后即可在package.json中查看  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 5]
3.  修改公共配置文件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. 创建组件与编码 ###

1.  在views目录下创建组件  
    可创建文件夹进行分类管理  
    ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_12_color_FFFFFF_t_70_g_se_x_16]
2.  对组件进行编码
    
    <table> 
     <thead> 
      <tr> 
       <th>标签</th> 
       <th>作用</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>template</td> 
       <td>可理解为Body部分，但template只能放置一个控件，如果需要放置多个控件，可以嵌套放在div控件中</td> 
      </tr> 
      <tr> 
       <td>script</td> 
       <td>JS脚本的部分</td> 
      </tr> 
      <tr> 
       <td>style</td> 
       <td>编写样式部分</td> 
      </tr> 
     </tbody> 
    </table>

<template>
        <div id="container">
            <h5>我的第一个组件</h5>
            <button>点击我看看</button>
        </div>
    </template>
    
    
    <script>
        export default {
        
            // 组件命名，必须存在
            name: "UserReg"
        }
    </script>
    
    
    <style scoped>
    
    </style>

### 2. 配置组件路由 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 6]

1.  引入组件
    
        //先引入编写好的组件
        import HomeView from '../views/HomeView.vue'
        import UserReg from "@/views/users/UserReg";
        import Hello from "@/views/Hello/Hello";
        import Main from "@/views/main/Main";
2.  配置路由
    
        //  配置路径、名称、组件
        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，点击链接即可  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
注意，vue支持热部署，在vue启动期间，如果文件发生改变，vue无需重新启动，刷新页面即可

## 五、前后端交互 ##

这里参考我的另一个博客，不再赘述[VUE前后端分离之数据交互（简单项目作为演示）][VUE]

[vue]: https://www.cnblogs.com/winter92/p/7117057.html
[yarn]: https://blog.csdn.net/yw00yw/article/details/81354533
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/84014dab94ad44cf9ec106819c6d7ef2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/dd3b2c45798c4f82b80511bd0ae8abd2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/16539e7cffda466881b5f332c8ea4190.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/453b3336df1a4aa1b7dd05ab479c7e90.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/74e2c39c9c4c43fba873cc3c48f564cf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[13a4b3d14e9a473399941d894205a5e7.png]: https://img-blog.csdnimg.cn/13a4b3d14e9a473399941d894205a5e7.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/ea7a3764ab3f4046bdde6ed22cca31af.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/92b8fcf70b964416a5e831f7df4c138d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/296905a7031c480dbf759ea8dd008485.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/8d9488b21ec14cc894251a31d511d204.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5LiA57qn5paw55Sf,size_20,color_FFFFFF,t_70,g_se,x_16
[VUE]: https://blog.csdn.net/weixin_45928161/article/details/123416915