2025年Vue 命令行工具 Vue-CLI 详解

科技前沿 • 2025-04-10 21:17 • 阅读 28

大家好，我是讯享网，很高兴认识大家。

讯享网

阅读目录

阐述
vue全家桶
vue-cli
- Vue CLI 的安装
- - ① 默认安装 vue/cli 脚手架 3
  - ② 默认安装失败，解决mode版本问题
  - ③ nvm下载太慢问题解决
  - ④ 安装 Node ^12.0.0
  - ⑤ 从新安装 VueCli 脚手架 3
  - ④ 拉取 2.x 模板 (旧版本)
  - ⑤ 安装vue指定版本
  - ⑥ 博主node版本
- 初始化项目
- - ① vue init命令讲解
  - ② 项目初始化
  - ③ 目录结构详解
  - ④ 运行项目
node 安装适合小白
- 1 去node官网下载
- 2 下载完成后双击安装包，跳出安装弹窗，点击Next
从新来过
- vue-cli 安装
- vue-cli 项目初始化
- 项目结构
- - 1、build目录（webpack配置）
  - 2、config目录（vue项目配置目录）
  - 3、node_modules（项目依赖包）
  - src 项目核心文件讲解
  - - 1、index.html（主页）
    - 2、main.js（入口文件）
    - 3、App.vue（根组件）
    - 4、router（路由配置）
    - 5、HelloWorld.vue（页面组件）
- 网页 CDN 引入 vue@2.6.14 示例
- - 内部指令
  - - （1）v-if
    - （2）v-else
    - （3）v-show
    - （4）v-else-if
    - （5）v-if 与 v-show 的区别
    - （6）v-for
    - （7）v-text
    - （8）v-html
    - （9）v-on
    - （10）v-model
    - （11）v-bind
    - （12）v-pre
    - （13）v-cloak
    - （14）v-once
  - 生命周期
  - - 生命周期表格
    - 生命周期图解
    - 阶段一：创建和挂载
    - 阶段二：更新
    - 阶段三：销毁
  - 常用选项
  - - 1、computed 计算属性、改造输出
    - 2、methods 用于绑定 html 中的事件对应的方法
    - 3、watch 数据变化监听器
    - 4、filters 过滤器：通常格式化字符，使用传值
    - 5、mixins 实现代码重用
    - 6、extends 扩展：对构造器进行扩展
  - 实例事件
  - - 1、$on（在构造器外部添加事件）
    - 2、$once（执行一次的事件）
    - 3、$off（关闭事件）
    - 4、$emit（事件调用）
  - 自定义指令
  - - 1、调试步骤
    - 2、参数说明
    - 3、生命周期
  - 组件基础
  - - 1、组件注册 component
    - 2、props 属性传值
    - 3、父子组件
  - 制作模板
  - - 1、选项模板
    - 2、标签模板
    - 3、`

2025年Vue 命令行工具 Vue-CLI 详解

阅读目录

相关推荐