Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置

忘是亡心i 2022-04-16 02:48 286阅读 0赞

### Vue 框架-11-介绍 src 文件流程及根组件 app ###

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

关于编辑器，可以使用轻量级的 Sublime Text 3，我使用的是 HBuilder，  
但是使用 HBuilder 会有一个问题，就是 HBuilder 默认使用的自己的 web 服务器，他的端口是 8020，然而我们搭建的 Vue 的 CLI 是 8080 端口，所以，在使用 HBuilder 打开浏览器时，会啥也看不到  
![20181115231801378.png][]

**必须要打开上一篇介绍的环境，并且在浏览器地址栏使用 8080 端口，**

搭建环境具体请查看：  
[Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动][Vue _-10-_ CLI _]

如果你是长期使用 Vue ，并且想要一直使用 HBuilder 做为开发工具的话，建议修改默认为服务器：  
（1）点击浏览器旁边的下箭头 >【设置 web 服务器】>展开【外部web服务器】>【新建】>内容格式：

> 名称：Vue Dev  
> 地址：[http://127.0.0.1:8080][http_127.0.0.1_8080]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF][]

（2）回到服务器设置，把 HTML 服务器选择成刚才的名称就可以了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1][]

### 介绍src文件流程及根组件app ###

**在 HBuilder 中打开项目：**  
直接【文件】>【打开目录】然后选择项目目录就可以了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2][]

然后可以看到：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3][]

先介绍 main.js（请看注释）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4][]

根组件 App.vue（请看注释）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_ffffff_t_70][]

App.vue：

<template>
    	
      <div id="app">
        <img src="./assets/logo.png">
        <HelloWorld/>
      </div>
    </template>
    
    
    <script>
    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>

### 更多文章： ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70]: /images/20220416/8c38b90cb7ef402ea0249334524c16a6.png
[20181115231801378.png]: /images/20220416/f4dd3b494335481198c4be55cee0ec15.png
[Vue _-10-_ CLI _]: https://blog.csdn.net/qq_40147863/article/details/84110982
[http_127.0.0.1_8080]: http://127.0.0.1:8080
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF]: /images/20220416/b730e38f0ad14f419ef9382f13f1d8bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 1]: /images/20220416/b9dfb712e73e4c6890559f2de382a3cf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 2]: /images/20220416/8bf304f89b6942d09dbd4b6c9b6661cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 3]: /images/20220416/d75abc0c841646f5aaeda4c061410a98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_FFFFFF_t_70 4]: /images/20220416/5a184a4a77a74b52a38cc0c3a8e03ca6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMTQ3ODYz_size_16_color_ffffff_t_70]: /images/20220416/c0e23472a9cf47e4a36a4ce9ca668c05.png
[https_blog.csdn.net_qq_40147863_article_category_8317526]: https://blog.csdn.net/qq_40147863/article/category/8317526