vue 微服务架构搭建 vue微服务化

在上一篇文章中，我们已经通过简单的方法生成了一个vue项目。那么下边简单介绍一下这个项目的结构：

 

• build：编译相关文件
• config：配置文件
• node_module：npm的依赖
• src：主要的代码
• assets：存放静态资源的地方，和static不同，打包的时候会重新编译，建议存放自己写的资源。
• components：存放组件的地方。
• router：路由管理器，用于页面跳转。
• static：静态资源
• test：测试文件

 

除了上述的文件意外，剩下还有一些单独的文件，如：校验代码格式的文件、git上传代码的时候的忽略文件以及README等文件，这里就先不叙述。

 

要想使用自己的组件，那么就先观察一下刚刚创建好的项目。启动项目之后看到的是这个画面：

 

 

 

那么为什么出现的是这个画面呢？我们可以观察main.js这个文件。从命名来说，就知道这个文件是最主要的文件。所有的东西都是从这个文件开始，具体的代码如下：

 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</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>

代码主要分为三个部分，分别是：<template>、<script>以及<style>。简单来说，分别是写html、js以及CSS的地方。

 

使用自己的组件有三个步骤：

 

1. 创建组件
2. 引用组件
3. 使用

 

 

创建主键

 

先到components文件夹下边新建一个vue文件，内容可以如下：

 

<template>
  <div>
    aaa
  </div>
</template>

<script>
export default {
  name: 'MyComponent1',
  methods: {
    handleForward (key, keyPath) {
      this.$router.push('/page1')
    }
  }
}
</script>

<style scoped>

</style>

 

在main.js里边引用组件，一共是两步：import 组件，使用组件。需要更改的地方如下：

 

 

<script>
import MyComponent1 from './components/MyComponent1' // 引入包
export default {
  name: 'App',
  components: {MyComponent1} // 注册组件，{}中是组件的名称
}
</script>

 

然后就可以在template中使用自定义的组件了：

 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <my-component1></my-component1>
  </div>
</template>

 

这里有一个小地方需要注意：在script里边，我们注册主键使用的是驼峰命名的方式，但是到template里边使用的时候，就会自动变成了用 “ - ” 连接的方式。所以现在项目的主页就会变成这个样子：

 

可以看到最后一行增加了我们组件的内容“aaa”。但是上边还有默认的主页的内容，这是因为在main.js中默认写了这两行代码：

 

<img src="./assets/logo.png">
<router-view/>

 

其中“<router-view/>”就是一个默认写好的组件，对应的是components中的“HelloWord.vue”。只要把他们删掉就可以只用自己的组件了。