当前位置: 首页 > news >正文

1.Vue3 - 创建Vue3工程

目录

  • 一、 基于vue-cli 脚手架
  • 二、基于vite 推荐
    • 2.1 介绍
    • 2.2 创建项目
    • 2.3 文件介绍
      • 2.3.1 extensions.json
      • 2.3.2 脚手架的根目录
      • 2.3.3 主要文件 src
        • 2.3.3.1 main.js
        • 2.3.3.2 App.vue 组件
        • 2.3.3.3 conponents
      • 2.3.4 env.d.ts
      • 2.3.5 index.html 入口文件
      • 2.3.6 package
      • 2.3.7 tsconfig
      • 2.3.8 vite.config.js

一、 基于vue-cli 脚手架

目前vue-cli已处于维护模式,官方推荐基于Vite创建项目

r## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli 
npm install -g @vue/cli## 执行创建命令
vue create vue_test##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x## 启动
cd vue_test
npm run serve

二、基于vite 推荐

2.1 介绍

vite 是新一代前端构建工具,官网地址:https://vitejs.cn,vite的优势如下:

  • 轻量快速的热重载(HMR),能实现极速的服务启动。
  • TypeScriptJSXCSS 等支持开箱即用。
  • 真正的按需编译,不再等待整个应用编译完成。
  • webpack构建 与 vite构建对比图如下:

webpack构建如下所示
从entry入口文件进来,先route路由对module每一个都分析,分析完成后进行一个Bundle处理,吃力完成之后Server ready 工程启动了
从route到module的过程是很耗时的
如果用webpack架构的时候,当路由和模块特别多的时候,启动项目就会非常的慢

在这里插入图片描述

vite构建如下图所示
一上来就Server ready项目就启动,那什么就没准备好就启动么? 其实是我们看哪个,它就会准备哪个
我们不看的路由和模块,就不会进行处理
有点懒加载的意思

在这里插入图片描述

2.2 创建项目

官方文档:https://cn.vuejs.org/guide/quick-start#creating-a-vue-application

## 1.创建命令
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

在这里插入图片描述

2.3 文件介绍

2.3.1 extensions.json

在这个文件中配置着各种各样的插件
在这里插入图片描述

2.3.2 脚手架的根目录

在这里插入图片描述

2.3.3 主要文件 src

在这里插入图片描述

2.3.3.1 main.js
// 样式内容
import './assets/main.css'// 下面这三行的内容比较重要
// 创建应用 相当于种花时候的花盆
import { createApp } from 'vue'// App组件 相当于花的根
import App from './App.vue'// App组件是所有组件的根 组件 将花插在花盆里
// mount是挂载的意思,挂载到app的容器里面,app容器在index.html文件里<div id="app"></div>
createApp(App).mount('#app')

此文件在入口文件index.html中通过如下代码被引入

 <script type="module" src="/src/main.js"></script>
2.3.3.2 App.vue 组件
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script><template><header><img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" /><div class="wrapper"><HelloWorld msg="You did it!" /></div></header><main><TheWelcome /></main>
</template><style scoped>
header {line-height: 1.5;
}.logo {display: block;margin: 0 auto 2rem;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}
}
</style>
2.3.3.3 conponents

里面会存放很多的组件,这里其实就是树枝,App.vue是根
在这里插入图片描述

2.3.4 env.d.ts

不要把这个文件删除,如果没有node_modules文件夹的话,意味着没有依赖,这个文件就会飘红
飘红的我们是我们直接执行 ”npm i“,安装所有的依赖在这里插入图片描述
如果我们直接向文件引入“.jpg”、“.txt”文件,ts会不认识的
env.d.ts文件的作用就是让ts认识这些文件,当我们加上图片中的代码后,我们的引用就不会飘红

2.3.5 index.html 入口文件

如果我们目前新项目的src目录中的内容都不动的话,我们的页面仅仅会呈现index.html文件中的内容
在这里插入图片描述
在这个文件中做了一个非常重要的事情,将"/src/main.js"引入了

 <script type="module" src="/src/main.js"></script>

2.3.6 package

包的管理文件,依赖声明文件
在这里插入图片描述

2.3.7 tsconfig

ts的配置文件,不能删除
在这里插入图片描述

2.3.8 vite.config.js

这是整个工程的配置文件
可以安装插件、配置代理
在这里插入图片描述

http://www.xdnf.cn/news/60481.html

相关文章:

  • JavaEE--2.多线程
  • RHCE 练习二:通过 ssh 实现两台主机免密登录以及 nginx 服务通过多 IP 区分多网站
  • 【基础算法】二分算法详解
  • 科大讯飞Q1营收46.6亿同比增长27.7%,扣非净利同比增长48.3%
  • [c语言日寄]免费文档生成器——Doxygen在c语言程序中的使用
  • uniapp-商城-31-shop页面中的 我的订单
  • 【大语言模型DeepSeek+ChatGPT+python】最新AI-Python机器学习与深度学习技术在植被参数反演中的核心技术应用
  • idea使用docker插件一键部署项目
  • Time to event :Kaplan-Meier曲线、Log Rank检验与Shiny R
  • Oracle EBS R12.2 安装 -- Step by Step
  • 利用Qt创建一个模拟问答系统
  • Oracle expdp的 EXCLUDE 参数详解
  • 【橘子大模型】Tools/Function call
  • 【MySQL】库的操作
  • MCU开发学习记录10 - 高级定时器学习与实践(HAL库)—PWM互补输出、死区控制、刹车控制 - STM32CubeMX
  • 邀请函 | 「软件定义汽车 同星定义软件」 TOSUN用户日2025·杭州站
  • SQL 中 ROLLUP 的使用方法
  • 系统安全及应用
  • Spark-SQL与Hive集成及数据分析实践
  • 【C++游戏引擎开发】第18篇:视锥体裁剪与光源剔除
  • XMLXXE 安全无回显方案OOB 盲注DTD 外部实体黑白盒挖掘
  • 基于LangChain与Neo4j构建企业关系图谱的金融风控实施方案,结合工商数据、供应链记录及舆情数据,实现隐性关联识别与动态风险评估
  • AI 赋能 3D 创作!Tripo3D 全功能深度解析与实操教程
  • 从本地存档到协作开发的Git简单使用
  • visionpro案例: 轴承缺珠检测
  • 递归神经网络
  • 互联网大厂Java面试:Spring Cloud与微服务的奇妙之旅
  • JAVA:利用 Apache Tika 提取文件内容的技术指南
  • 并发编程之ReentrantLock
  • xpath选择器