Vue前端实战教程：环境搭建+组件化开发+组件通信

Liij

于 2024-08-06 08:00:00 发布

阅读量1.2k

点赞数 24

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

本文链接：https://blog.csdn.net/As_Yua/article/details/140934824

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3.1 安装相应的插件--elementui

环境搭建与项目初始化

1. 安装 Node.js 和 NPM

1.1 安装 Node.j

java项目可以运行在tomcat服务器，开始完成前后端完全分离。前端有自己独立的工程。我们需要把前端独立的工程运行起来。---运行在nodejs服务器下。理解为tomcat服务器

验证是否安装过该软件：

node --version

1.2 安装npm

java项目需要依赖jar，安装maven。前端项目需要依赖第三方的插件。比如axios elementui echarts 前端也需要一个管理组件的软件。npm. 如果package.json文件类似于pom.xml文件。 npm通过该文件package.json文件安装依赖的插件。如果安装了node 默认安装了npm

验证：

npm -v

2. 如何安装 Vue CLI的脚手架

帮你创建前端项目工程。它的安装需要依赖上面的npm

2.1 安装Vue CLI

npm install -g @vue/cli

-g: global 全局

验证是否安装成功：

vue --version

3. 使用vuecli搭建vue前端项目

第一种使用命令: vue create
第二种使用图形化界面： vue ui

我们使用第二种打开命令提示符Windows+R，输入cmd，进去之后输去vue ui

3.1 安装相应的插件--elementui

安装插件有两种方式:

第一种使用命令: npm i element-ui -S
第二种使用图形化:

3.2 安装axios依赖

发送异步请求的

第一种命令: npm i -S axios
第二种图形化:如下

4. 使用客户端软件打开vue工程

vscode [专业的前端工具]
webstorm [idea团队开发的软件--只要会使用idea那么也会使用该工具]
hbuilder [适合前端]

在webstorm中启动该项目

重启

vue原理

组件化开发

1. 组件化的概念与优势

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构[html]、样式[css]、行为 [js]。
好处：便于维护，利于复用 → 提升开发效率。
组件分类：普通组件、根组件。比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

2. 根组件与普通组件

1. 根组件介绍

2. 组件是由三部分构成

三部分构成 template：

结构（有且只能一个根元素）
script: js逻辑
style：样式 (可支持less，需要装包)

让组件支持less

style标签，lang="less" 开启less功能
装包: yarn add less less-loader -D 或者npm i less less-loader -D

3. 普通组件的注册使用

普通组件的注册有两种方式：

局部注册：
全局注册

3.1 普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

创建.vue文件（三个组成部分）
在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可

4.注意：

组件名规范 —> 大驼峰命名法，如 AAAHeader 5.语法

 // 导入需要注册的组件
// import 组件对象 from '.vue文件路径'
 import AAAHeader from './components/AAAHeader'
 export default {•  // 局部注册
components: {
 '组件名': 组件对象,
 AAAHeader:AAAHeader,
 AAAHeader
 }
 }

3.2 普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

创建.vue组件（三个组成部分）
main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

4.注意

组件名规范 —> 大驼峰命名法，如 AAAHeader

5.语法

Vue.component('组件名', 组件对象）

 // 导入需要全局注册的组件
import AAAButton from './components/AAAButton'
 Vue.component('AAAButton', AAAButton)

组件通信

1. 什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

2. 组件之间如何通信

3. 组件关系分类

父子关系
非父子关系

5. 父子通信流程

父组件通过 props 将数据传递给子组件 [重点]
子组件利用 $emit 通知父组件修改更新

6.父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

 <template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件 
    <Son></Son>
  </div>
 </template>
 <script>
 import Son from './components/Son.vue'
 export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来AAA教育',
    }
 },
  components: {
    Son,
  },
 }
 </script>
 <style>
 </style>

子组件Son.vue

 <template>
  <div class="son" style="border:3px solid #000;margin:10px">
    我是Son组件
  </div>
 </template>
 <script>
 export default {
  name: 'Son-Child',
 }
 </script>
 <style>
 </style>

父向子传值步骤

给子组件以添加属性的方式传值
子组件内部通过props接收
模板中直接使用 props接收的值

7.子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

$emit触发事件，给父组件发送消息通知
父组件监听$emit触发的事件
提供处理函数，在函数的性参中获取传过来的参数

未完待续！！！

Liij

关注

24
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Vue前端实战教程：环境搭建+组件化开发+组件通信

结构（有且只能一个根元素）script: js逻辑style：样式 (可支持less，需要装包)让组件支持lessstyle标签，lang="less" 开启less功能装包: yarn add less less-loader -D 或者npm i less less-loader -D。
复制链接

扫一扫

专栏目录