Vue项目结构

Vue页面框架

对于8080端口，经常被占用，可以去修改默认的8080端口。修改vue.config.js文件的内容，添加如下代码：

devServer:{
    port:7000
}

显示页面的逻辑：

<div id="app"></div>

public中index.html文件中挂盒子并且指定id

import App from './App.vue'

new Vue({
  router,
  render: h => h(App)
}).$mount("#app")

main.js文件中创建一个新的Vue实例，配置包括使用的路由器和主组件的渲染方法。

• h(App) 使用h函数创建一个代表App组件的VNode。这里App是之前导入的主组件，通过这种方式，Vue知道应该将App组件渲染为DOM的一部分。

• $mount("#app")将这个Vue实例挂载到HTML中id为"app"的元素上。样Vue应用就开始运行了。

<template>
  <div>

    <emp-view></emp-view>
    
  </div>
</template>

<script>
import EmpView from './views/tlias/EmpView.vue'
export default {
  components: {EmpView},
  data() {
    return {
      message: "Hello vue222"
    }
  },
  methods: {
    
  }
}
</script>

<style>

</style>

编写App.vue文件

• import EmpView from './views/tlias/EmpView.vue': 导入EmpView组件，路径指向项目中的另一个Vue组件文件。

• components: {EmpView}: 在当前组件中注册EmpView组件，使其可以在模板中使用。

• <emp-view>: 自定义组件标签，表示在这个组件内部引用了名为EmpView的子组件。Vue会寻找并展示这个子组件的内容。