第7天：Vue组件化开发

NPM使用

NPM简介

NPM（Node Package Manager）是一个NodeJS包管理和分发工具。NPM以其优秀的依赖管理机制和庞大的用户群体，目前已经发展成为整个JS领域的依赖管理工具。NPM最常见的用法就是用于安装和更新依赖。要使用NPM，首先要安装Node工具。

NodeJS安装

Node.js是一个基于Chrome v8引擎的JavaScript运行时环境。Node中包含了NPM包管理工具。
下载地址：https://nodejs.org/zh-cn/

NPM使用

Vue CLI使用

开发vue项目时，不再以html的形式直接写代码，以工程化的形式开发。

• Vue CLI是Vue官方提供的构建工具，通常成为脚手架。
• 用于快速搭建一个带有热重载（在代码修改后不必刷新页面即可呈现 修改后的效果）及构件生产版本等功能的单页面应用。
• Vue CLI基于webpack构建，也可以通过项目内的配置文件进行配置。
• 安装：npm install -g @vue/cli

项目创建

• 切换到项目创建目录cmd，执行命令：vue create 项目名称
  
• 选择最新版Vue3
• 选择package.json，相关依赖记录到package.json
• 项目正在创建
  
• 项目创建完成
  
• 项目启动
  npm run serve
  
  

组件化开发

模块化开发

main.js
main.js 程序的入口文件，在里面创建vue的vm对象。
通过import方式导入各种模块，完成前端代码的组织。

import {
    
     createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

组件化开发

组件化开发介绍

App.vue是vue提供的一个根组件，vue倾向于使用组件的形式进行开发，把网页的各个部分抽象为一个个组件，组件可以进行重用，组件和组件里面还可以做嵌套。
组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。比如导航栏可以封装成为组件，在多个网页进行使用。
Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。

组件的构成

Vue中规定组件的后缀名是.vue
每个.vue组件都由3部分构成，分别是：
template，组件的模板结构，可以包含HTML标签及其他的组件
script，组件的JavaScript代码
style，组件的样式

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
  <Hello></Hello>
</template>

<script>
//导入模块
// import HelloWorld from './components/HelloWorld.vue'
import Hello from './components/Hello.vue'

export default {
      
      
  name: 'App',
  //注册组件
  components: {
      
      
    // HelloWorld
    Hello
  }
}
</script>

<style>
#app {
      
      
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>