【3 Vue组件化基础 - 脚手架】

努力修福报

已于 2023-05-29 21:51:27 修改

阅读量29

点赞数

分类专栏： VUE 学习文章标签： vue.js javascript 前端

于 2023-05-21 18:54:13 首次发布

本文链接：https://blog.csdn.net/qq_31421983/article/details/130794153

版权

VUE 学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1 认识组件化开发

在这里插入图片描述

Vue的组件化

在这里插入图片描述

2 注册全局组件

在这里插入图片描述

<body>

  <div id="app">
    <!-- 1.内容一: -->
    <product-item></product-item>
    
    <!-- 2.内容二: -->
    <product-item></product-item>

    <!-- 3.内容三: -->
    <product-item></product-item>
  </div>


  <!-- 组件product-item的模板 -->
  <template id="item">
    <div class="product">
      <h2>我是商品</h2>
      <div>商品图片</div>
      <div>商品价格: <span>¥9.9</span></div>
      <p>商品描述信息, 9.9秒杀</p>
    </div>
  </template>
  
  <script src="../lib/vue.js"></script>
  <script>
    /*
      1.通过app.component(组件名称, 组件的对象)
      2.在App组件的模板中, 可以直接使用product-item的组件
    */

    // 1.组件: App组件(根组件)
    const App = {}

    // 2.创建app
    const app = Vue.createApp(App)

    // 3.注册一个全局组件
    // product-item全局组件
    app.component("product-item", {
      template: "#item"
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

组件的命名

在这里插入图片描述

3 注册局部组件

在这里插入图片描述

<body>

  <div id="app">
    <home-nav></home-nav>

    <product-item></product-item>
    <product-item></product-item>
    <product-item></product-item>
  </div>
  
  <template id="product">
    <div class="product">
      <h2>{{title}}</h2>
      <p>商品描述, 限时折扣, 赶紧抢购</p>
      <p>价格: {{price}}</p>
      <button>收藏</button>
    </div>
  </template>

  <template id="nav">
    <div>-------------------- nav start ---------------</div>
    <h1>我是home-nav的组件</h1>
    <product-item></product-item>
    <div>-------------------- nav end ---------------</div>
  </template>

  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const ProductItem = {
      template: "#product",
      data() {
        return {
          title: "我是product的title",
          price: 9.9
        }
      }
    }

    // 1.1.组件打算在哪里被使用
    const app = Vue.createApp({
      // components: option api
      components: {
        ProductItem,
        HomeNav: {
          template: "#nav",
          components: {
            ProductItem
          }
        }
      },
      // data: option api
      data() {
        return {
          message: "Hello Vue"
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

4 Vue的开发模式

所以在真实开发中，我们可以通过一个后缀名为 .vue 的single-file components (单文件组件) 来解决，并且可以使用
webpack或者vite或者rollup等构建工具来对其进行处理。在这里插入图片描述

Vue CLI脚手架

在这里插入图片描述

5 Vue CLI 安装和使用

安装node.js环境
在这里插入图片描述

运行缺少node_modules的vue项目

指定到项目目录，执行

npm audit fix --force

创建Vue项目

在这里插入图片描述

vue-cli运行项目

npm run serve

vite运行项目

npm run dev

coderwhy vue create 项目的过程

在这里插入图片描述

项目的目录结构

在这里插入图片描述

Vue CLI的运行原理

在这里插入图片描述

努力修福报

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【3 Vue组件化基础 - 脚手架】

所以在真实开发中，我们可以通过一个后缀名为 .vue 的single-file components (单文件组件) 来解决，并且可以使用。webpack或者vite或者rollup等构建工具来对其进行处理。
复制链接

扫一扫