webpack-simple模板项目实战

太过爱你忘了你带给我的痛 2021-07-24 17:38 339阅读 0赞

**目录**

一 项目内结构

1 index.html

2 main.js文件是整个 vue 项目的入口 js

3 App.vue

二 Vue文件的组成部分

三 页面设计

四 在vue 组件中使用多个 vue 组件搭建一个页面——全局注册

1 App.vue

2 Header.vue

3 content.vue

4 bottom.vue

5 main.js

五 在vue 组件中使用多个 vue 组件搭建一个页面——本地注册

1 Header.vue、content.vue和bottom.vue文件内容不变

2 main.js 不用修改任何内容

3 App.vue

六 效果

七 说明

1 项目中组件的全局注册

2 项目中组件的本地注册

--------------------

# 一 项目内结构 #

## 1 index.html ##

无论前端页面内容多复杂，index.html都只有11行。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>myvuedemo</title>
      </head>
      <body>
        <div id="app"></div>
        <script src="/dist/build.js"></script>
      </body>
    </html>

实际的内容已经被打包进了 /dist/build.js。

## 2 main.js文件是整个 vue 项目的入口 js ##

import Vue from 'vue'
    // 导入了 APP.vue 组件
    import App from './App.vue'
    
    new Vue({
      // 让当前 vue 对象绑定页面上的id是app的那个div
      el: '#app',
      // 让 App.vue 的内容展现在该 div 中
      render: h => h(App)
    })

## 3 App.vue ##

App.vue 这种以“.vue”为扩展名的文件，实际上就是一个 Vue 对象，这种文件，也称为 Vue 组件。

# 二 Vue文件的组成部分 #

<template>   
        <div>
        </div>
    </template>
    
    <script>
    
    export default {
      // 对象名
      name: 'app',
      // 数据部分
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      // 方法部分
      methods:{},
      // 计算属性部分
      computed:{},
      // 监听部分
      watch:{}
    }
    </script>
    
    
    <style scoped>
    </style>

# 三 页面设计 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 四 在vue 组件中使用多个 vue 组件搭建一个页面——全局注册 #

## 1 App.vue ##

<template>
      <div id="app">
        <MyHeader></MyHeader>
        <MyContent></MyContent>
        <MyBottom></MyBottom>
      </div>
    </template>
    <script>
    export default {
      name: 'app',
    }
    </script>
    <style>
    </style>

## 2 Header.vue ##

<template>
      <div>
        <h1>{
       {title}}</h1>
      </div>
    </template>
    <script>
      export default {
        name: "Header",
        data() {
          return {
            title: "宝淘私人用品分享网"
          }
        }
      }
    </script>
    <style scoped>
    </style>

## 3 content.vue ##

<template>
        <div>
          商品列表...
        </div>
    </template>
    <script>
        export default {
            name: "content"
        }
    </script>
    <style scoped>
    </style>

## 4 bottom.vue ##

## 5 main.js ##

import Vue from 'vue'
    import App from './App.vue'
    import Header from './components/Header'
    import Content from './components/content'
    import Bottom from './components/bottom'
    // 全局注册了三个组件，可以把组件拿来当标签一样使用
    Vue.component('MyHeader', Header)
    Vue.component('MyContent',Content)
    Vue.component( 'MyBottom',Bottom)
    new Vue({
      el: '#app',
      render: h => h(App)
    })

# 五 在vue 组件中使用多个 vue 组件搭建一个页面——本地注册 #

## 1 Header.vue、content.vue和bottom.vue文件内容不变 ##

## 2 main.js 不用修改任何内容 ##

## 3 App.vue ##

<template>
      <div id="app">
        <MyHeader></MyHeader>
        <MyContent></MyContent>
        <MyBottom></MyBottom>
      </div>
    </template>
    <script>
      /* 导入组件 */
      import Header from "./components/Header";
      import content from "./components/content";
      import bottom from "./components/bottom";
    export default {
      name: 'app',
      data(){},
      /* 注册本地组件 */
      components:{
        "MyHeader":Header,
        "MyContent":content,
        "MyBottom":bottom
      }
    }
    </script>
    <style>
    </style>

# 六 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

# 七 说明 #

## 1 项目中组件的全局注册 ##

在 main.js 中，通过 import 和 [Vue.component][]配合，来将一个 vue 文件注册成一个标签。该标签就可以在整个项目中使用。

## 2 项目中组件的本地注册 ##

在组件内部去注册另外一个组件，成为一个标签，这个标签只在组件内部使用，而不能在其他组件内使用。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/b17c3a07fa0f4966a76cf963ee51d7a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/f6a6677d7f4e461e82c2b868a662aaac.png
[Vue.component]: http://vue.component/