前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
AI 面试
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Vue3基础小结

首页
2021-02-16 16:12:12
Front-End
Vue

# 一、vue环境搭建

# 安装Vue官方脚手架以及创建项目

注意: 安装脚手架创建项目之前之前,我们的电脑上必须得安装Nodejs,推荐安装nodejs稳定版本

文档地址: https://v3.vuejs.org/guide/installation.html#cli

Vue-cli地址: https://cli.vuejs.org/

Vite地址: https://github.com/vitejs/vite

通过Vue-cli脚手架工具可以让我们快速的搭建vue项目,目前Vue官方给我们提供了2个脚手架,Vue-cli和Vite。

# 通过Vue-cli创建我们的项目

yarn global add @vue/cli
# OR
npm install -g @vue/cli
# OR
cnpm install -g @vue/cli
@前端进阶之旅: 代码已经复制到剪贴板

如果电脑上面没有安装过cnpm可以通过下面命令安装:

npm install -g cnpm --registry=https://registry.npm.taobao.org
@前端进阶之旅: 代码已经复制到剪贴板

如果电脑上面没有安装过yarn可以通过下面命令安装:

npm i -g yarn
@前端进阶之旅: 代码已经复制到剪贴板

创建项目

vue create hello-vue3

yarn serve
@前端进阶
fe
  • 一、vue环境搭建
    • 安装Vue官方脚手架以及创建项目
    • 通过Vue-cli创建我们的项目
    • 通过Vite脚手架创建我们的项目
      • 目录结构
      • 开发工具以及插件配置
  • 二、父组件给子组件传值、Props验证、单向数据流
    • 父子组件介绍
    • 父组件给子组件传值
      • 父组件调用子组件的时候传值
      • 子组件接收父组件传值
    • Props验证
    • 单向数据流
    • 父组件主动获取子组件的数据和执行子组件方法
      • 调用子组件的时候定义一个ref
      • 父组件主动获取子组件数据
      • 父组件主动执行子组件方法
    • 子组件主动获取父组件的数据和执行父组件方法
      • 子组件主动获取父组件的数据
      • 子组件主动获取父组件的数据
  • 三、组件的生命周期函数、 this.$nextTick、动态组件 keep-alive
    • 生命周期函数
    • 动态组件 keep-alive
    • this.$nextTick
  • 四、Mixin实现组件功能的复用
    • mixin介绍使用
      • 新建mixin/base.js
      • 使用mixin
    • 关于Mixin的选项合并
    • 全局配置Mixin
  • 五、使用Teleport自定义一个模态对话框的组件
    • Teleport
    • 使用Teleport实现一个模态对话框的组件

← Vue3之Composition API详解异步编程入门之RxJs(一) →