【Spring&Vue学习】八、Vue组件化&模块化开发

👉原文阅读

💡章前导言

本文为B站1天搞定SpringBoot+Vue全栈开发系列视频学习笔记，带时间戳的B站笔记（不含代码）已经施工完成，点击视频右下角的“笔记”按钮即可查看（不带B站时间戳的笔记专栏链接在这）。

有能力的朋友请多多支持up拿完整的课件代码！本笔记代码部分不全，纯手打（我手打是因为个人而言手打记忆才深刻）。

如果想要资料，老师的微信公众号有免费的课件和文档，关注“软件练习生”公众号回复“Java”获取课件资料（注意：关注回复关键字就可以，不会让你加群/微信的！）。

我自己整理的课件、代码等资料（不保证全），放在Github上了，需要的自取。
👉1天搞定SpringBoot+Vue全栈开发·个人整理资料

📘正文开始

对应视频内容👉Vue组件化开发

NPM使用

NPM简介

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

NPM&Vue下载安装

进入https://nodejs.org/en网站下载Node.js
打开msi安装包一直点击next完成安装
win+R打开终端，进入项目路径，输入

npm install -g @vue/cli

（网络问题可以先输入下面代码更换代理再安装）

npm config set registry https://registry.npm.taobao.org

Vue CLI使用

创建Vue项目

输入

vue create hello

上下键切换选项，选择Manually select features选项，并回车
上下切换选项，空格选中/取消选中，空格取消选中Linter/Formatter选项，并回车
选择3.x版本并回车
选择不存储预选，输入N

Vue文件基本结构

package.json：配置文件，记录项目基本信息
src：写代码的目录
main.js:主要用到模块化开发的思想（区别于组件化），目前前端项目基本通过import的方式导入各类模块。（早期的前端代码主要通过script标签去引入各类文件）
- 第一行：通过vue导入其createApp方法
- 第二行：导入了app.vue的app
- 调用createApp方法，把app传过去，同时将其mount到了#app标签上（标签在public的index.html里）

main.js全部代码如下：

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

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

Vue.app：
- <template>：放组件的标签、文本、结构，放置了：
  - img标签
  - helloworld标签（自定义组件，在components里面，可以删掉自己写）
- <script>:放组件的一些行为
- <style>：放组件的一些css的样式

Vue.app全部代码如下：：

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

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

运行Vue项目

打开终端，输入：

npm run serve

自定义组件

使用import导入,例如：

import HelloWorld from './components/HelloWorld.vue'

导入结束后进行注册:

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

(1、2步代码都放在script内)

创建.vue文件自定义组件：添加<template>、<script>、<style>标签,在标签里简单加入内容即可

(可以安装Vetur插件着色代码）