Vue 框架-12-Vue 项目的详细开发流程

叁歲伎倆 2022-04-16 04:20 374阅读 0赞

### Vue 框架-12-Vue 项目的详细开发流程 ###

首先，如果你还不了解 Vue 脚手架怎么搭建？  
默认的环境中有哪些文件？  
文件大概是什么作用？  
那么，您要先查看之前的文章才有助于你理解本篇文章：

[Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动][Vue _-10-_ CLI _]  
[ Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置][Vue _-11-_src_app_HBuilder]

### （一）Vue 组件及环境依赖介绍 ###

大家打开 Vue 脚手架的环境，再打开搭建的项目中的入口文件 index.html 文件，这样：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70][]

其实，你会发现里面 index.html 中就只有一行有用：  
一个 div，id 为 app

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>first_pro</title>
      </head>
      <body>
        
        <div id="app"></div>
        
      </body>
    </html>

为啥连引入 js 都不需要呢？  
这时候就会自然的想到我们 cmd 运行的一个环境，它是通过多个组件和组件之间的依赖组成的一个环境，不知道大家有没有注意到，打开环境的时候会有一个中间界面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1][]

它就是在构建一个我们的 Vue 的一个环境，使在环境中运行的 html 文件拥有里面的一些功能和内容：

简单说一下他们之前的依赖关系，首先是：  
（1）package.json 配置文件，这里面定义了 dev ，当我们打开环境的时候不就是执行了一个 npm run dev 吗，npm 就是 Node Package Manager，他就依赖这样一个配置文件搭建环境：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2][]

（2）然后它就会根据这个 dev 找到定义的 webpack.dev.conf.js 文件，这里面又有 index.html 文件的说明：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3][]

（3）然后他就会找各个需要的组件文件，最终搭建成功一个环境，build 目录下的文件大家想看可以去看，我就不多说了，因为对开发来说，不是很重要。

**（4）最重要的都知道一点，main.js 是最先执行的主 js 文件**

### （二）Vue 组件介绍及组件嵌套 ###

下面，先要说的是 Vue 的组件，之前介绍的 Vue 默认的根组件 App.vue，后缀名是 .vue 的文件就是 Vue 项目中的组件，默认环境中还有一个就是在 src/components 下的 HelloWorld.vue 组件

想要搞清楚这些组件之间的关系，就要看 main.js 文件中，是怎么的一个依赖关系，也就是所谓的组件嵌套，来看 main.js （看注释）：

// 用 “import” 命令加载 Vue 构建版本
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    
    //from 会去找同级目录的 App.vue 根组件
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
    	//要获取的 HTML 中 id 为 app 标签
      el: '#app',
      //组件要在 components 注册一下，这个 App 是上面 import 得到的一个 App
      components: { App },
      
      //默认的 template 模板（不可以随便改）
      template: '<App/>'
    })

### （三）Vue 项目的详细开发流程 ###

有人说了，我懂了他们之间的一个关系，那我还是不懂怎么个开发流程

（1）先构建自己的组件 User.vue（强烈建议放在 HelloWord.vue 同级目录），大家可以直接拷贝 App.vue 根组件的代码，作为一个框架，省事，易懂，再看一遍 App.vue 文件，其中有三部分，也是浏览器页面的三层（看注释）：

<template>
    	
      <div id="app">
        <img src="./assets/logo.png">
        <HelloWorld/>
      </div>
    </template>
    
    
    <script>
    //	HelloWorld 是另外一个组件，需要在 components 里注册，下面有
    import HelloWorld from './components/HelloWorld'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      }
    }
    </script>
    
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

（2）只创建组件 User.vue，实际是和项目分离的一个状态，下面就有把我们自己定义组件加到项目中，有两种方式：

*  （1）全局注册自定义组件（一般用于多次使用的公共元素）：  
    打开 main.js 文件，import 再 components，请看截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4][]

这时候就已经完成全局注册，我们就可以在使用了，  
【注意】：直接把 user 当做标签来使用  
例如：打开 App.vue 文件，我们在他的结构层，就是最上面的 HTMl 模板代码块中，加上，打开环境，打开浏览器，就可以看到 user 组件中的内容了

*  （2）局部注册组件：  
    如果尝试了上面的全局注册，先在 main.js 文章注释掉刚才加的内容，打开 App.vue 组件，（注意代码位置在行为层）截图：  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5][]

源代码：

<template>
    	
      <div id="app">
         <user></user>
      </div>
    </template>
    
    
    
    <script>
    	
    //在根组件中 局部注册自定义组件
    import User from './components/User'
    
    //	HelloWorld 是另外一个组件，需要在 components 里注册，下面有
    import HelloWorld from './components/HelloWorld'
    
    export default {
      name: 'App',
      components: {
        "user":User
      }
    }
    </script>
    
    
    <style>
    
    </style>

然后大家就可以去浏览器查看啦！！  
上面就是整个一个开发流程

### 更多文章： ###

*  Vue 小实例：[https://blog.csdn.net/qq\_40147863/article/category/8317526][https_blog.csdn.net_qq_40147863_article_category_8317526]

[Vue _-10-_ CLI _]: https://blog.csdn.net/qq_40147863/article/details/84110982
[Vue _-11-_src_app_HBuilder]: https://blog.csdn.net/qq_40147863/article/details/84111949
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70]: /images/20220416/8b6bf0e7c58b49e69719d2aec8ce75d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1]: /images/20220416/4abda3c704d44c8baa818584e1f397a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]: /images/20220416/a7626bbf364640b2949cd4cdbeeab2f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3]: /images/20220416/686044f3fe664a4f9413740462ac754f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4]: /images/20220416/0ba7ce108cde40a98d8a430adcad1ca5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 5]: /images/20220416/203e8576e4e9458b86418cde5bf4e306.png
[https_blog.csdn.net_qq_40147863_article_category_8317526]: https://blog.csdn.net/qq_40147863/article/category/8317526