一文快速上手-create-vue脚手架

文章目录

    • 初识 create-vue
    • create-vue新建项目
    • Vue.js 3 项目目录结构
    • 项目的运行和打包
    • vite.config.js文件解析
    • 其他:webpack和Vite的区别

初识 create-vue

create-vue类似于Vue CLI脚手架,可以快速创建vuejs 3项目,create-vue基于Vite。Vite支持Vue CLI中的大多数配置,并且Vite以极速启动服务、快如闪电的热重载,提供了更好的开发体验

与Vue CLI 不同的是,create-vue脚手架会根据你选择的功能创建一个预配置的项目,然后将其余部分委托给Vite。

注意:create-vue脚手架要求Node.js版本大于16

create-vue新建项目

create-vue脚手架创建vue3版本项目,有两种常见的方式。

1.全局安装create-vue脚手架

npm i create-vue@latest -g

使用create-vue命令创建Vue.js 3 项目。

创建项目命令:

create-vue createapp-vue3demo

其中createapp-vue3demo是项目名称。

2.局部安装create-vue脚手架

npm init vue@latest

这里执行npm init vue@latest的意思:

  • 临时安装create-vue@latest脚手架(注意:不是全局安装)
  • 安装完成后立即执行create-vue命令来创建项目

在VScode终端执行npm init vue@latest命令,创建一个如02-createapp-demo项目,如下所示(示例代码都选择了否,实际项目中根据需要选择相应的功能):

请输入项目名称: ... createapp_demo
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是

Vue.js 3 项目目录结构

createapp_demo/       # 项目的名称(命名规范:建议统一小写,多个单词使用下划线分割)
|-- public/              # 静态资源目录  
|   |-- favicon.ico      # 网站图标  
|-- src/                 # 源代码目录  
|   |-- assets/          # 存放静态资源,如图片、字体等  
|   |-- components/      # 可复用的 Vue 组件目录  
|   |-- views/           # 页面目录,存放路由对应的组件  
|   |-- App.vue          # 根组件  
|   |-- main.js          # 项目的入口文件  
|   |-- main.ts          # TypeScript 版本的入口文件(如果选择了 TypeScript)  
|-- tsconfig.json        # TypeScript 配置文件(如果选择了 TypeScript)  
|-- .gitignore           # Git 忽略的文件和目录  
|-- index.html           # 项目的入口 HTML 文件  
|-- package.json         # 项目的元数据和依赖信息  
|-- package-lock.json    # npm 依赖锁定文件  
|-- vite.config.js       # Vite 配置文件  
|-- README.md            # 项目说明文件

项目的运行和打包

"dev": "vite",
"build": "vite build",
"preview": "vite preview"

说明:

  • dev:启动项目的本地运行脚本
  • build:打包项目的脚本
  • preview:预览编译后的项目的脚本

vite.config.js文件解析

与Vue CLI相同,create-vue脚手架也提供了一些常用的配置,方便我们进行扩展和自定义。这些配置包括outDir、assetsDir、alias、base和server等。

vite.config.js默认的配置代码如下:

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})
  • 1.outDir:指定打包输出的目录名称,默认是dist(与vue.config.js中的outputDir功能相同)。
export default defineConfig({......build: {outDir: 'build'}
})
  • 2.assetsDir:用于指定静态资源存放的目录,默认是assets(与vue.config.js中的assetsDir功能相同)。

项目代码编译后,index.html引入资源默认情况如下:

<script type="module" crossorigin src="/assets/index-BEb411hP.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BaMTLMsk.css">

配置:

export default defineConfig({......build: {outDir: 'build',assetsDir: 'static' // 指定静态资源存放目录(相对于build.outDir),默认是assets}
})

上面配置调整后,index.html引入资源情况如下:

<script type="module" crossorigin src="/static/index-lKLvkvL0.js"></script>
<link rel="stylesheet" crossorigin href="/static/index-BaMTLMsk.css">
  • 3.base:用于指定开发或者生产的公共基础路径,即指定引用资源的前缀(与vue.config.js中的publicPath功能相同),代码如下:
export default defineConfig({base: './'
})

base属性支持:

- 绝对URL路径,如`/my-app/`
- 完整URL,如`http://it.com/`;
- 用于开发或者生产环境的空字符串或'./'
  • 4.alias:用于为导包的路径设置别名(与vue.config.js中的alias功能相同),示例代码如下:
export default defineConfig({.......resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url)),'components': fileURLToPath(new URL('./src/components', import.meta.url))}},......
})

引入HelloWorld组件就有如下三种方式:

import HelloWorld from './components/HelloWorld.vue'
import HelloWorld from '@/components/HelloWorld.vue'
import HelloWorld from 'components/HelloWorld.vue'
  • 5.server:用于开发环境设置服务器选项

示例:

import { defineConfig } from "vite";// https://vitejs.dev/config/
export default defineConfig({server: {host: "localhost",port: 8081,open: true,proxy: {},},
});

其他:webpack和Vite的区别

Vue CLI是基于webpack实现的,而create-vue是基于vite实现的。

主要区别:

  • 在打包应用程序时,webpack会生成一个依赖关系图。该依赖关系图中含有应用程序所需要的所有模块,然后遍历图结构,编译一个个模块,当某个模块有变化时,相关依赖模块需要全部编译一次。项目越复杂、模块越多,打包速度就越慢。
  • Vite利用ES Module 可以自动发起请求的特性,在打包应用程序时,Vite不需要分析模块的依赖,也不需要编译。当浏览器请求某个模块时,再按需对模块内容进行编译,这种按需动态编译的方式大幅度减少了编译时间。因此,Vite的启动速度非常快,比JavaScript编写的打包器预构建依赖的速度快10倍到100倍,项目越复杂、模块越多。
  • Vite 天然支持打包TypeScript、JSX、CSS等文件;而webpack需要安装对应的Loader进行处理。
  • webpack支持开发和生产环境打包;Vite在打包生产环境时需要使用Rollup,Vite的主要优势体现在开发阶段。
  • webpack无论是自身优势还是生态都非常强大,使用者非常多;而Vite的整个社区生态正在快速完善。

说明:ES Module 是 JavaScript 的官方模块化标准,它允许开发者通过importexport 语句来组织和分享代码。特别地,ES Module 支持动态导入,即使用 import() 函数来异步地加载一个模块。这种动态导入的特性为 Vite 提供了按需编译的基础。

注意事项:

  • 虽然 Vite 的按需编译策略在开发过程中非常有效,但在生产环境中,通常仍然需要静态地分析和打包代码,以确保最佳的加载性能和兼容性。因此,Vite 提供了构建命令,用于在生产环境中生成优化过的代码 bundle。
  • 在企业生产环境中,建议优先选择 Vue CLI脚手架,因为 webpack 经过多年发展,已经非常稳定,社区生态也非常成熟。

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

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

相关文章

C++ nullptr 和NULL的区别

个人主页&#xff1a;Jason_from_China-CSDN博客 所属栏目&#xff1a;C系统性学习_Jason_from_China的博客-CSDN博客 所属栏目&#xff1a;C知识点的补充_Jason_from_China的博客-CSDN博客 概念概述&#xff1a; 在C中&#xff0c;nullptr 和 NULL 都是用来表示空指针&#xf…

GPT对话知识库——串口通信的数据的组成?起始位是高电平还是低电平?如何用代码在 FreeRTOS 中实现串口通信吗?如何处理串口通信中的数据帧校验吗?

目录 1&#xff0c;问&#xff1a; 1&#xff0c;答&#xff1a; 串口数据的组成 串口数据传输帧的完整结构 起始位的电平状态&#xff1a;低电平 举例&#xff1a;UART数据传输的例子 适用场景 总结 2&#xff0c;问&#xff1a; 2&#xff0c;答&#xff1a; a. 如…

微波无源器件 功分器3 一种用于多端口辐射单元的紧凑四路双极化正交模功分器的设计

摘要&#xff1a; 一种有着双极化能力并且能作为一个Fabry-Perot谐振腔天线的馈源包含四个输入端口的新型紧凑功分器的概念和设计被提出了。在四个圆波导中的双同相极化通过使用四个5端口十字转门结合两个8by1&#xff08;八合一&#xff09; 功分网络。功分器末端接了两个端口…

【RabbitMQ】工作模式

工作模式概述 简单模式 简单模式中只存在一个生产者&#xff0c;只存在一个消费者。生产者生产消息&#xff0c;消费者消费消息。消息只能被消费一次&#xff0c;也称为点对点模式。 简单模式适合在消息只能被单个消费者处理的场景下存在。 工作队列模式&#xff08;Work Qu…

项目管理 | 一文读懂什么是敏捷开发管理

在快速变化的商业环境中&#xff0c;项目管理方式也在不断演进&#xff0c;其中敏捷开发管理因其高效、灵活和适应性强的特点&#xff0c;逐渐成为众多企业和团队的首选。本文将详细解析敏捷开发管理的定义、具体内容及其核心角色&#xff0c;帮助读者全面理解这一先进的项目管…

心觉:不能成事的根本原因

很多人一直都很努力&#xff0c;每天都很忙 每天都学习很多东西&#xff0c;学习各种道&#xff0c;各种方法论 但是许多年过去了依然一事无成 自己的目标没有达成&#xff0c;梦想没有实现 为什么呢 关键是没有开悟 那么什么是开悟呢 现在很多人都在讲开悟 貌似开悟很…

harmony初学者入门

一、开发前准备 1.申请开发者账号,可进行个人认证和企业认证 2.下载开发者工具&#xff0c;下载最新版本的devecoStudio &#xff0c;当然可以下载历史版本的 3.安装DevEco Studio 4.申请模拟器 并且安装模拟器 在此说明下 有预览器 模拟器和真机&#xff0c; 个人开发学习的话…

阿里云 Quick BI使用介绍

Quick BI使用介绍 文章目录 阿里云 Quick BI使用介绍1. 创建自己的quick bi服务器2. 新建数据源3. 上传文件和 使用4. 开始分析 -选仪表盘5. 提供的图表6. 一个图表的设置使用小结 阿里云 Quick BI使用介绍 Quick BI是一款全场景数据消费式的BI平台&#xff0c;秉承全场景消费…

AI逻辑推理入门

参考数据鲸 (linklearner.com) 1. 跑通baseline 报名 申领大模型API 模型服务灵积-API-KEY管理 (aliyun.com) 跑通代码 在anaconda新建名为“LLM”的环境,并安装好相应包后,在jupyter notebook上运行baseline01.ipynb 2. 赛题解读 一般情况下,拿到一个赛题之后,我们需…

C++系列-匿名对象

匿名对象 &#x1f4a2;什么是匿名对象&#x1f4a2;匿名对象的创建方式及作用域&#x1f4a2;匿名对象的对象类型&#x1f4a2;&#x1f4a2;匿名的基本数据类型对象&#x1f4a2;&#x1f4a2;匿名的自定义的类类型对象&#x1f4a2;&#x1f4a2;匿名的标准库的类对象 &…

CleanClip vs 传统剪贴板:究竟谁更胜一筹?

在日常工作和生活中,复制粘贴可以说是我们使用最频繁的操作之一。传统的剪贴板功能虽然简单易用,但在功能性和效率上还有很大的提升空间。今天,我们就来比较一下新兴的剪贴板增强工具CleanClip与传统剪贴板,看看到底谁更胜一筹。 1. 剪贴历史管理 传统剪贴板只能存储最后一次…

通过adb命令打开手机usb调试

adb shell settings put global adb_enabled 1 这个命令会将全局ADB启用设置为1&#xff0c;允许通过ADB进行调试。 adb shell settings put secure adb_authentication_enabled 1 这个命令会启用ADB身份验证&#xff0c;允许设备在连接时要求授权。 adb shell settings put …

【Java】类的成员之一-代码块【主线学习笔记】

文章目录 前言类的成员之一-代码块作用静态初始化块非静态代码块 前言 Java是一门功能强大且广泛应用的编程语言&#xff0c;具有跨平台性和高效的执行速度&#xff0c;广受开发者喜爱。在接下来的学习过程中&#xff0c;我将记录学习过程中的基础语法、框架和实践技巧等&#…

Pyspark下操作dataframe方法(3)

文章目录 Pyspark dataframe操作方式3df.foreach 逐条执行foreachPartition 按分区逐条执行freqltemsgroupBy 分组head 获取指定数量开头hint 查询优化intersect 获取交集&#xff08;去重&#xff09;isEmpty 判断dataframe是否为空join 关联limit 限定数量mapInPandas 迭代处…

PaddleNLP本文分类及docker部署流程

本文记录使用PaddleNLP进行文本分类的全流程 参考&#xff1a;https://github.com/PaddlePaddle/PaddleNLP/tree/develop/legacy/applications/text_classification/multi_class 文章目录 1. 数据准备2. 模型训练2.1 准备关键库2.2 模型训练&#xff06;验证2.3 模型测试2.4 结…

分布式中间件-redis相关概念介绍

文章目录 什么是redis?示意图Redis的主要特点Redis的主要用途Redis的工作原理Redis的持久化与备份 redis 6.x新增特性多线程数据加载客户端缓存新的 RESP 3 协议支持ACL&#xff08;Access Control List&#xff09;功能新增数据类型性能改进配置文件的改进其他改进 redis数据…

前端vue中如何给reactive赋值

const deviceDatareactive({}) const getDeviceDetail (list)>{ if(list.length > 0){ for(let item of list){ if(item.id param.id){ Object.assign(deviceData,item) } } } }

02 基于STM32的按键控制继电器驱动电机

本专栏所有源资料都免费获取&#xff0c;没有任何隐形消费。 注意事项&#xff1a;STM32仿真会存在各种各样BUG&#xff0c;且尽量按照同样仿真版本使用。本专栏所有的仿真都采用PROTEUS8.15。 本文已经配置好STM32F103C8T6系列&#xff0c;在PROTUES仿真里&#xff0c;32单片…

Doker学习笔记--黑马

介绍&#xff1a;快速构建、运行、管理应用的工具 在不同的服务器上部署多个应用&#xff0c;但是往往不同应用之间会有冲突&#xff0c;因为它们所依赖的环境&#xff0c;函数库&#xff0c;配置都不一样&#xff0c;此时docker在运行时形成了一个隔离环境&#xff08;容器&am…

【C++篇】C++类与对象深度解析(三):类的默认成员函数详解

文章目录 【C篇】C类与对象深度解析&#xff08;三&#xff09;前言4. 运算符重载基本概念4.1 运算符重载的基本概念4.2 重载运算符的规则4.3 成员函数重载运算符4.4 运算符重载的优先级与结合性4.5 运算符重载中的限制与特殊情况4.5.1 不能创建新的操作符4.5.2 无法重载的运算…