vue-cli和vue组件

文章目录

• 前言
• 一、vue-cli和组件化开发是什么？
• 二、使用步骤
  • 1.安装包
  • 2.基于 vue-cli 快速生成工程化的 Vue 项目
  • 3.组件化开发
• 总结

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue-cli和组件化开发是什么？

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

二、vue-cli使用步骤

1.安装包

代码如下（示例）：

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上： npm install -g @vue/cl

2.基于 vue-cli 快速生成工程化的 Vue 项目

代码如下（示例）：

//进行项目名称的创建
vue create 项目的名称
项目创建之后可以通过↑和↓进行选择需要的选项
    在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。 
    其中： 
         ① App.vue 用来编写待渲染的模板结构 
         ② index.html 中需要预留一个 el 区域 
         ③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中


3.vue 组件

vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件

每个 .vue 组件都由 3 部分构成，分别是：

 1.template -> 组件的模板结构

 2.script -> 组件的 JavaScript 行为

 3.style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分

vue 规定：每个组件对应的模板结构，需要定义到 <template>节点中

注意：

template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素

template 中只能包含唯一的根节点

组件化开发的模板格式

<template>

</template>

<script>

export default {

}

</script>

<style>

</style>

首先在app.vue进行需要导入的组件，可以通过私有组件导入，但是这个不是所有的都可以用，也可以在main.js进行公有的导入，这个是所有的都可以使用

私有导入，例如

//导入你需要的组件

import Header from '@/components/Header/Header.vue'

接下来在 export default{

components: {

    Header,

}

然后再<template>

<Header></<Header>>

</template>

通过npm run serve 运行cli 然后点击http://localhost:8080/，就可以看见你刚才导入的组件

 但是这个只能在app.vue里面使用，如果遇到了使用比较多的组件，可以把他导入main.js里面，导成一个公有的组件，就是都可以使用的组件，

// 导入vue这个包

import Vue from 'vue'

// 导入app.vue的根组件，将来把他渲染到html页面

Vue.config.productionTip = false

// 创建vue的实例对象

new Vue({

  // 把render函数指定的组件，渲染到html页面中

  render: h => h(text),

}).$mount('#app')

那么所有的组件都可以调用这个text的组件

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。