前言

hi，这个系列是我自学开发的笔记，适合具有一定编程基础（html、css那些基础知识要会！）的同学，有问题请及时指正！

NPM使用

NPM简介

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

nodejs安装

下载地址：https://nodejs.org/en/download 链接直达

npm命令

贴个基础命令博客：http://t.csdnimg.cn/EM8XM，链接直达

Vue CLI使用

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

在我们想要放vue项目的目录下，打开cmd，输入上方的命令进行安装；安装成功后，之后我们就可以快速建vue项目而不用像之前那样从vscode建html再引用vue的script

用vue CLI创建一个vue项目

创建一个vue项目，hello是项目名字

选择最后一个选项，eslint是检查语法风格的，学习初期不推荐用。

按空格取消linter/formatter,然后回车

选择3.x，再按回车

这一步是问把选择安装的依赖记录在哪个文件，选择package.json，这个json文件功能类似maven的pom.xml

这一步是问要不要创建快照，之后可以快速创建项目，选N

创建好之后，在我们刚刚的目录下会出现一个hello文件夹，点进去后完整的目录格式如下：

一个vue项目就创建好了！这和我在之前的博客 springboot+vue全栈开发【2.前端准备工作篇】
中创建vue项目的方法完全不一样

组件化开发

组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。
Vue的组件系统允许我们使用小型、独立和通常可复用的组件构建大型应用。

组件的构成

• Vue 中规定组件的后缀名是.vue
• 每个.vue组件都由3部分构成，分别是

•  template,组件的模板结构，可以包含HTML标签及其他的组件
  

•  script,组件的JavaScript代码
  

•  style,组件的样式
  

以app.vue进行分析。如图，helloworld就是我们自定义的组件。在使用自定义组件的时候，我们需要在开头对其进行引用。

• export default {...}：导出一个对象，这个对象是当前组件的配置。其中：

•  name: 'App'：指定了当前组件的名称。
  

•  components: { HelloWorld }：注册了HelloWorld组件，这样在模板中就可以使用<HelloWorld/>标签。
  

• #app：选择器，指定了样式应用到哪个元素上。
• 样式属性如font-family、-webkit-font-smoothing等用于定义元素的外观。

组件怎么用

1.创建一个组件

首先，你需要创建一个Vue组件。一个Vue组件通常包括三个部分：<template>（HTML模板）、<script>（JavaScript逻辑）和<style>（CSS样式）。一般我们将自定义组件放在component目录下：

2.在父组件中使用子组件

在父组件中，可以通过注册和引用的方式使用子组件。以下hello.vue是我的组件文件名，HelloWorld是我给组件起的名字。

局部注册
在父组件的<script>中局部注册子组件：

<script>
import HelloWorld from './components/hello.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

然后在父组件的模版中使用：

<template>
  <div>
    <HelloWorld :msg="message" />
  </div>
</template>

全局注册
也可以全局注册组件，使其在应用的任何地方都可用：

// main.js or any main entry file
import Vue from 'vue'
import App from './App.vue'
import HelloWorld from './components/hello.vue'

Vue.component('HelloWorld', HelloWorld)

new Vue({
  render: h => h(App),
}).$mount('#app')

3. 传递数据给子组件

可以通过props向子组件传递数据：

<HelloWorld :msg="message" />

在子组件中接受并使用这些数据，子组件就会显示父组件传递的message数据。

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

4. 监听子组件事件

可以监听子组件的事件并在父组件中处理：

<!-- 在子组件中 -->
<button @click="$emit('custom-event', eventData)">Click me</button>

<!-- 在父组件中 -->
<HelloWorld @custom-event="handleCustomEvent" />

// 在父组件的 methods 中
methods: {
  handleCustomEvent(data) {
    console.log('Received custom event with data:', data);
  }
}