526互联

26-Vue脚手架-分析脚手架

发布时间 2023-10-18 17:08:50作者: 马铃薯1

将 24-Vue组件化编程-单文件组件 放到使用Vue脚手架创建的vue_test项目中

 

脚手架文件结构

    ├── node_modules 
    ├── public
    │   ├── favicon.ico: 页签图标
    │   └── index.html: 主页面
    ├── src
    │   ├── assets: 存放静态资源
    │   │   └── logo.png
    │   │── component: 存放组件
    │   │   └── HelloWorld.vue
    │   │── App.vue: 汇总所有组件
    │   │── main.js: 入口文件
    ├── .gitignore: git版本管制忽略的配置
    ├── babel.config.js: babel的配置文件
    ├── package.json: 应用包配置文件 
    ├── README.md: 应用描述文件
    ├── package-lock.json：包版本控制文件

 

src/components/School.vue

<template>
  <!--组件的结构-->
  <div class="demo" style="background-color:orange;">
    <h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点击提示学校信息</button>
  </div>
</template>

<script>
  // 组件交互相关的代码（数据、方法）
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:"School",

    data(){
      return{
        schoolName:"东华理工大学",
        address:"江西南昌"
      }
    },
    methods:{
      showName(){
        alert(this.schoolName)
      }
    }
  }

</script>

<style>
 //组件的样式
  .demo {
    //background-color: orange;
  }
</style>

src/components/Student.vue

<template>
  <!--组件的结构-->
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
  </div>
</template>

<script>
  // 组件交互相关的代码（数据、方法）
  export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Student",

    data(){
      return{
        name:"马铃薯",
        age:26
      }
    }
  }
</script>

<style>
</style>

src/App.vue

<template>
  <div>
    <img src="./assets/logo.png">
    <!--使用组件标签-->
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
// 引入组件
import School from "./components/School.vue";
import Student from "./components/Student.vue";

export default {
  name:"App",
  // 注册组件
  components:{
    School:School,
    Student:Student
  }
}
</script>

<style>
</style>

src/main.js

// 该文件是整个项目的入口文件

// 引入Vue（残缺版）
import Vue from 'vue'
// 引入Vue（完整版）
// import Vue from 'vue/dist/vue'

// 引入App组件，它是所有组件的父组件
import App from './App.vue'

// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

// 创建Vue实例对象 vm
// new Vue({
//   render: h => h(App),
// }).$mount('#app')

new Vue({
  el:"#app",
  // 下面这行代码一会解释，完成了这个功能：将App组件放入容器中
  render: h => h(App),

  // 引入Vue（残缺版）写法
  // render(createElement){
  //   console.log(666)
  //   return createElement("h1","你好啊")
  // }

  // 引入Vue（完整版）写法
  // template:"<h1>你好啊</h1>",
  // components:{App:App}

})

public/index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对IE浏览器的一个特殊配置，含义是仍IE浏览器以最高的渲染级别渲染页面 -->
    <!-- Vue不支持IE8及以下的版本，因为Vue使用了IE8无法模拟的ECMAScript 5特性。但它支持所有兼容ECMAScript 5的浏览器 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!--当浏览器不支持js时，noscript中的元素就会被渲染-->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>