第十五章 Vue工程化开发及Vue CLI脚手架

目录

一、引言

二、Vue CLI 基本介绍

三、安装Vue CLI

3.1. 安装npm和yarn

3.2. 安装Vue CLI

3.3. 查看 Vue 版本

四、创建启动工程

4.1. 创建项目架子

4.2. 启动工程

五、脚手架目录文件介绍

六、核心文件讲解 

6.1. index.html

6.2. main.js

6.3. App.vue 


一、引言

开发 Vue 的两种方式:

1. 核心包传统开发模式:基于html/css/js文件,直接引入核心包,开发Vue。

    我们前面几个章节涉及到的就是传统的开发模式。

2. 工程化开发模式:基于构建工具(例如:webpack ) 的环境中开发Vue。

工程化开发模式问题:

① webpack 配置不简单

② 雷同的基础配置

③ 缺乏统一标准

二、Vue CLI 基本介绍

Vue CLI 是 Vue 官方提供的一个全局命令工具,它解决了以往工程化开发模式的主要问题,生成标准化的配置,可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

1. 开箱即用,零配置

2. 内置 babel 等工具

3. 标准化

Vue CLI脚手架创建出来的工程结构如下: 

三、安装Vue CLI

3.1. 安装npm和yarn

我本地是mac 安装方式如下(Windows系统可百度AI,这里不做赘述)

3.2. 安装Vue CLI

全局安装 (一次) :yarn global add @vue/cli npm i @vue/cli -g

报下列错误,解决方式如下:

自动补充兼容 的命令
yarn config set ignore-engines true 

3.3. 查看 Vue 版本

vue --version

四、创建启动工程

4.1. 创建项目架子

到自己指定的路径下创建Vue CLI脚手架的工程

vue create project-name(项目名-不能用中文)

Vue版本根据自身情况选择,这几章节学习主要讲解Vue2,所以我这里选择了Vue2: 

创建好的工程结构图: 

4.2. 启动工程

进入到我们创建好的工程目录中

yarn serve npm run serve(这两个命令会找package.json中的serve命令来启动,停止工程Ctrl+C

注:如果我们日后将serve改为dev,那么启动时就要用yarn serve,我们改成什么值,后续启动就要用这个值。 

五、脚手架目录文件介绍

六、核心文件讲解 

6.1. index.html

6.2. main.js

6.3. App.vue 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/462452.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Rust 力扣 - 2841. 几乎唯一子数组的最大和

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 我们遍历长度为k的窗口,用一个哈希表记录窗口内的所有元素(用来对窗口内元素去重),我们取哈希表中元素数量大于等于m的窗口总和的最大值 题解代码 use std::coll…

Python数据分析案例61——信贷风控评分卡模型(A卡)(scorecardpy 全面解析)

案例背景 虽然在效果上,传统的逻辑回归模型通常不如现代的机器学习模型,但在风控领域,解释性至关重要。逻辑回归的解释性是这些“黑箱”模型所无法比拟的,因此,研究传统的评分卡模型依然是有意义的。 传统的评分卡模型…

免费送源码:Java+Springboot+MySQL Springboot酒店客房管理系统的设计与实现 计算机毕业设计原创定制

摘 要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对酒店客房管理等问题,对酒店客房…

力扣每日一题 超级饮料的最大强化能量 动态规划(dp)

来自未来的体育科学家给你两个整数数组 energyDrinkA 和 energyDrinkB,数组长度都等于 n。这两个数组分别代表 A、B 两种不同能量饮料每小时所能提供的强化能量。 你需要每小时饮用一种能量饮料来 最大化 你的总强化能量。然而,如果从一种能量饮料切换到…

Linux高阶——1027—守护进程

1、守护进程的基本流程 1、父进程创建子进程,父进程退出 守护进程是孤儿进程,但是是工程师人为创建的孤儿进程,低开销模式运行,对系统没有压力 2、子进程(守护进程)脱离控制终端,创建新会话 …

抗疫物资管理:SpringBoot技术应用案例

目 录 摘 要 1 前 言 2 第1章 概述 2 1.1 研究背景 3 1.2 研究目的 3 1.3 研究内容 4 第二章 开发技术介绍 5 2.1相关技术 5 2.2 Java技术 6 2.3 MySQL数据库 6 2.4 Tomcat介绍 7 2.5 Spring Boot框架 8 第三章 系统分析 9 3.1 可行性分析 9 3.1.1 技术可行性 9 3.1.2 经济可行…

pandas——数据结构

一、series (一)创建series import pandas as pd#1.使用列表或数组创建Series # 使用列表创建Series,索引默认从0开始 s1 pd.Series([1, 2, 3]) print(s1) # 使用列表和自定义索引创建Series s2 pd.Series([1, 2, 3], index[a, b, c]) pr…

MySQL的SQL语句之触发器的创建和应用

触发器 Trigger 一.触发器 作用:当检测到某种数据表发生数据变化时,自动执行操作,保证数据的完整性,保证数据的一致性。 1.创建一个触发器 如上图所示,查看这个create的帮助信息的时候,这个create trig…

服务器数据恢复—DELL EqualLogic PS6100系列存储简介及如何收集故障信息?

DELL EqualLogic PS6100系列存储采用虚拟ISCSI SAN阵列,支持VMware、Solaris、Linux、Mac、HP-UX、AIX操作系统,提供全套企业级数据保护和管理功能,具有可扩展性和容错功能。DELL EqualLogic PS6100系列存储介绍: 1、上层应用基础…

什么是无限钱包系统?有什么优势?

在数字货币风起云涌的今天,一个名为“无限钱包系统”的创新平台正悄然引领着行业的变革。它不仅重新定义了数字资产的管理方式,更以卓越的安全性、便捷的操作体验以及前瞻性的技术理念,成为了广大数字货币爱好者心中的理想之选。 一、数字货币…

API网关 - JWT认证 ; 原理概述与具体实践样例

API网关主要提供的能力,就是协议转换,安全,限流等能力。 本文主要是分享 如何基于API网关实现 JWT 认证 。 包含了JWT认证的流程,原理,与具体的配置样例 API网关认证的重要性 在现代Web应用和微服务架构中&#x…

前端加密解密

一、 AES 加密与解密 高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。是一种对称加密算法也就是加密和解密用相同的密钥; 1.1 使用 crypto-js 实现 AES 加密 1.1.1 参数说明 data 要加密的明文key 秘钥iv …

基于知识引导提示的因果概念提取(论文复现)

基于知识引导提示的因果概念提取(论文复现) 本文所涉及所有资源均在传知代码平台可获取 文章目录 基于知识引导提示的因果概念提取(论文复现)论文概述论文方法提示构造器获取典型概念集聚类典型概念构建训练数据训练主题分类器概念提取器输入构造指针网络置信度评分训练损失…

【element ui系列】分享几种实现el-table表格单选的方法

在实际的开发中,经常会用到从表格中选择一条记录的情况,虽然官方给出的例子,但是给人感觉看起来不明显,于是,在此基础上做了改进。接下来,介绍两种常见的实现方法: 1、采用复选框(checkbox)实现…

63 mysql 的 行锁

前言 我们这里来说的就是 我们在 mysql 这边常见的 几种锁 行共享锁, 行排他锁, 表意向共享锁, 表意向排他锁, 表共享锁, 表排他锁 意向共享锁, 意向排他锁, 主要是 为了表粒度的锁获取的同步判断, 提升效率 意向共享锁, 意向排他锁 这边主要的逻辑意义是数据表中是否有任…

江协科技STM32学习- P26 UART串口外设

🚀write in front🚀 🔎大家好,我是黄桃罐头,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝​…

使用 ADB 在某个特定时间点点击 Android 设备上的某个按钮

前提条件 安装 ADB:确保你已经在计算机上安装了 Android SDK(或单独的 ADB)。并将其添加到系统环境变量中,以便你可以在命令行中运行 adb。 USB调试:确保 Android 设备已启用 USB 调试模式。这可以在设备的“设置” -…

mint-ui Picker 显示异常

mint-ui Picker 显示异常 现象 最近一个老项目页面显示异常&#xff0c;使用mint-ui Picker显示异常,直接显示成了 数据对象&#xff0c;而不是具体travelName 字段 组件 mint-ui Picker 使用方式(vue方式) // template <mt-picker :slots"slots" value-key…

FastAPI性能对比:同步vs异步

大家好&#xff0c;FastAPI已成为构建Python API的最流行框架之一&#xff0c;因其速度和易用性而广受欢迎。但在构建高性能应用程序时&#xff0c;使用同步&#xff08;sync&#xff09;还是异步&#xff08;async&#xff09;代码执行是很重要的问题。本文将通过现实世界的性…

wx.setNavigationBarColor动态设置导航栏颜色无效(亲测有效)

wx.setNavigationBarColor动态设置导航栏颜色无效&#xff08;亲测有效&#xff09; 问题描述问题分析问题解决注意 问题描述 wx.setNavigationBarColor({frontColor: #E6E6E6,backgroundColor: #E6E6E6 })上面的代码设置后导航栏颜色没有变化&#xff0c;查看了app.json 以及…