创建VUE项目，在IDea上进行开发与运行的简单流程

妖狐艹你老母 2023-09-30 08:26 10阅读 0赞

#### 目录 ####

*  一、创建VUE项目
 *   *  1. 外部终端创建
     *  2. IDea内部终端创建
     *  3. 项目介绍
     *  4. vue 的特别之处
 *  二、在IDea上开发与运行
 *   *  1. 创建组件与编码
     *  2. 配置组件路由
     *  3. 设置访问关联
     *  4. 运行

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

## 一、创建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是将外套、衬衫、裤子、鞋分开设计，然后再自由组合成一套衣服。

## 二、在IDea上开发与运行 ##

### 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 5]

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. 设置访问关联 ###

打开App.vue创建链接  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 6]

### 4. 运行 ###

Termial上运行vue，点击链接即可  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5LiA57qn5paw55Sf_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
注意，vue支持热部署，在vue启动期间，如果文件发生改变，vue无需重新启动，刷新页面即可

[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
[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 5]: 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 6]: https://img-blog.csdnimg.cn/9f499caaaf184aa7a461efaadb588391.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