前言
今天是就是冬至了,大家有没有吃饺子!!!冬至是北半球一年之中夜晚最长的一天,祝大家在这个长夜,能融化掉这一年所有的不快乐。
从我们学习web前端开始,我们就学习了各种
html,css,js
会在html
文件中将css和js
引入,此时我们的文件是以html
为基准,由它向外延伸制造出各种页面的效果,但这仅仅局限于我们的学习阶段,就好像你只是在装修一个小小的店面。在实际的企业开发中,我们需要的则是构建一栋甚至几十栋房子,如此复杂的项目不同于简单的页面开发,我们需要一个帮手,一个前端基建工具,那么它就是vite
——工程化的核心套件,今天我们通过它来理解我们项目中的工程化和构造一个组件。
项目基础
Vite就类似于我们在建房子中运用到的脚手架,既然要利用它我们首先得先安装它吧,我们首先在根目录下输入:
npm init vite
成功运行后会提示你输入项目的名称,以及选择需要用到的前端框架,在这里它提供了Vue,还支持 React、Svelte、Preact 等多个流行的前端框架,今天我们选择Vue
。选择完成之会让你选择语言,我们选择JavaScript
。
创建成功后,我们打开根目录,也就是刚刚输入项目的名称文件,会发现下面多出了一堆文件,我们点开
package.json
项目描述文件:
{
"name": "try-vue",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.5.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.0.3"
}
}
"type": "module"
:这是一个特殊字段,它告诉 Node.js 或浏览器环境,当前文件或项目应该被视为 ECMAScript 模块(ESM),这意味着你可以直接使用import
和export
语法。
script
脚本区域:
"dev": "vite"
: 运行vite
命令,启动 Vite 开发服务器。当你在开发环境中工作时,可以使用npm run dev
启动服务器,并且 Vite 会自动监听文件变化并进行热更新,让你看到即时的效果。build
: 运行vite build
命令,构建生产环境的代码。这个命令会将你的项目打包成优化后的静态文件,适合部署到生产环境中。preview
: 运行vite preview
命令,启动一个本地服务器来预览构建后的生产环境。这有助于你在部署之前检查构建结果是否正常。
依赖项:
**dependencies**
:Vue.js 的核心库,版本^3.5.13
。这些是我们项目运行时必须的依赖项,在项目所有阶段都需要用到,这里会显示依赖的名称以及版本号。**devDependencies**
:这些是我们在开发过程中需要的依赖项,但是在生产环境中不需要,这些包只会安装在开发环境中。
工程的不同生命周期(项目的不同阶段)
- dev 开发阶段
- test 测试阶段
- build 上线阶段
- online 运营维护
接下来我们就通过npm run dev
命令来启动服务器:
1. vite
会通过http协议在本地启动开发服务器,监听5173端口(默认)。
2.vite
会自动查找根目录下的index.html
文件,并将其作为应用入口的页面,即首页。其中有我们的挂载点,用于挂载Vue应用。
3. Vite 会根据 index.html
中的 <script type="module" src="/src/main.js"></script>
标签,动态引入 src/main.js
文件。这是应用程序的主入口文件。
src
是我们项目开发的主战场,它是开发目录,让我们来看看main.js
文件:
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引入根组件
createApp(App).mount('#app')
main.js
文件是 Vue 项目中的核心入口文件,它的主要作用是初始化和配置 Vue 应用实例,并将其挂载到 HTML 页面中。
createApp(App).mount('#app')
是引入我们的根组件。根组件(Root Component)是整个应用的起点和最外层的容器组件。它是所有其他组件的父组件,所有的子组件都嵌套在这个根组件中。根组件通常由 App.vue
文件定义,并在 main.js
中被创建的应用实例挂载到 HTML 页面中的某个元素上(通常是 #app
)。
组件
相信不用我解释你们也能明白,下一个地方我们就该去到根组件App.vue
下了。我们的组件就是在这里被开发的,它是我们现代前端开发的新单元,组件 = 由一个逻辑单元的html + css + js 组成的一个.vue文件,就好比我们在建房子中不同的区域,卧室,客厅,卫生间,厨房,这就是我们一个又一个的组件,他们有着不同的功能,所以组件是按照功能来划分的,是我们对某项功能的抽象。.vue
文件下的三段式组,也就是前端三剑客成了我们的这个组件。
组件作为前端的开发单位,那为什么不是页面呢,因为在不同的页面中,我们可能需要用到同一个功能,而组件是可以重复利用的,我们只需要对标一个功能做出一个组件它就能一直复用,并且我们的组件是以标签嵌入页面中的,可读性非常高,而且在实际开发中很好维护,也是因为不同的组件发挥着不同的功能。
下面我们把默认的App.vue
文件清空,自己写一个组件:
<template>
<div>
<h1>Hello Vue!</h1>
<Counter />
</div>
</template>
<script setup>
import Counter from './components/Counter.vue'
</script>
在.vue
文件下,html
写在标签template
中,css和js还是和之前一样。
可以看出来,在这个根组件中,我们还引入了其他的组件,因为我们的组件也是嵌套使用的,当你想要制作一个功能,那么一定是由不同的需求来解决的,就比如在卧室这个组件中,我们需要床,电视,电脑等等。我们现在在这里面嵌套一个组件用来计数。
<template>
<div class="counter">
<p>Count:{{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script setup> // setup 可以免写return
import {
ref
} from 'vue'
const count = ref(0)
const increment = () => {
count.value++;
}
</script>
<style>
.count{
text-align: center;
margin-top: 50px;
}
button{
padding: 10px 20px;
font-size: 16px;
}
</style>
我们来看看效果,打开我们最开始npm run dev
返回的5173端口:
成功啦,这就是我们vue的第一个小小小组件。
小结
这是学习Vue框架基础的开始,希望能帮助到你,我们一起进步。