Vue3项目搭建与基础知识详解

最新推荐文章于 2024-09-26 12:44:52 发布

码农巧克零

最新推荐文章于 2024-09-26 12:44:52 发布

阅读量1k

点赞数 10

分类专栏：程序员前端开发编程文章标签： git elasticsearch 大数据前端 javascript

本文链接：https://blog.csdn.net/weixin_47588164/article/details/142280771

版权

程序员同时被 3 个专栏收录

149 篇文章 0 订阅

订阅专栏

前端开发

149 篇文章 0 订阅

订阅专栏

编程

149 篇文章 0 订阅

订阅专栏

在上一篇文章中# 初识Vue框架，我们通过原生JS和Vue的对比，来对Vue进行了一些了解，也是知道了Vue的强大昂，说实话我是真觉得Vue很简洁高效灵活。之前我也是大致的对里面的目录文件进行了一个简介和了解，这篇文章呢，我就来带着大家一起再学习学习vue。一起来看看吧

创建Vue项目

首先，我们先去创建一个名为vue-introduce的Vue项目，要怎么创建呢？

打开命令行终端，输入下命令，用于创建我们的Vue项目：
js

代码解读

复制代码
npm create vue@latest
然后呢，就是输入我们项目的名字咯，vue-introduce，然后我们就会得到以下一系列的功能选项：
这里我们目前并不需要用到这些功能，所以就全部统统pass掉，一个都不要，一路否下去。不过之后我们在些项目的时候，肯定会用上的，那就以后慢慢学慢慢用吧，先把这些简单的基础学好先。
我们将这个文件夹用vscode打开吧（不会还有人不知道，会自动帮我们生成一个名为vue-introduce的文件夹吧
根据终端中的提示，依次输入就好了
- cd vue-introduce : 进入该文件
- npm install或者npm i : 会根据package.json中列出来的依赖项和指定的版本，从npm仓库下载并安装到node_module文件中，方便于我们去使用。
- npm run dev :则是让我们的项目跑起来，从而获得一个地址（http://localhost:5173/），我们就可以在本地浏览器上访问和测试项目，而且当我们修改代码时，不需要手动去刷新页面，可以实时看到效果。

当我们在浏览器中访问这个地址，我们就可以得到这样一个页面：

这就说明我们已经创建成功了，可以去编写自己的代码咯

项目结构与清理

我们先打开项目目录，这里有一些默认的文件存放在里面，需要对这些进行删除。

并且来到我们的代码主战场src文件夹下，为什么其他的不去管呢，因为其他的东西我不去调用，就不关我事啊，我只要把我的战场清理干净就好了方便我们在里面写自己的代码
把assets和component俩个文件夹都删掉，就留下App.vue和main.js就好了。你肯定会问为什么为什么为什么。
理由就是，assets文件夹下一般存放的都是一些静态资源和css样式，component文件夹存放的是App.vue 的一些子组件，不过这些都是现在这个页面需要的，而我们是要写自己的页面，要他们干嘛，是吧。等我们需要用的时候，再自己创建就好了。
然后就是处理一下App.vue 和main.js了，App.vue里面的就全部删除好了。至于main.js,我们就来搞懂一些东西吧。

`main.js`解析

我们先拿到这个JS，来看看。assets文件夹都删掉了，还要这个import引入干嘛，删掉。然后我们来看看其他的，看看他们又是什么好东西：

import { createApp } from 'vue'：从Vue.js库中导入createApp函数。在Vue3之前，也就是Vue2的时候，是使用new Vue()来创建一个新的Vue实例，但在Vue 3中，这种做法已经被废弃，取而代之的是使用createApp函数来创建一个Vue实例，这里主要的作用是使用createApp函数的mount方法将根组件挂载到指定的根节点上。
import App from './App.vue'：从./App.vue文件中导入根组件App。这个组件通常是我们项目的最外层组件也就是根组件，之后我们可以将所有的其他组件都嵌套在这个组件中。也就是组件化思想。
createApp(App).mount('#app')：将App挂载到DOM中的某个节点或者某个元素上。这里的'#app'是一个CSS选择器（id="app"），也是Vue内置规定好的根节点app。所以这里就是将我们的App根组件挂载在app根节点上(具有id="app"的HTMl元素上。
或许你也注意到了，俩个import都是导入一些东西，那为什么他们长的就不太一样呢

首先，这里的import是es6中的模块化module，用于从模块中导入一些东西，具体导入什么以及如何导入，取决于模块中是如何导出的。所以import 和 export都是成双成对的出现。import是用于从其他模块导入导出的变量、函数或类；而export则是用于在一个模块中导出变量、函数或类，以便其他模块可以导入和使用。而在一个模块中有四种常见的导出方式分别是命名导出、默认导出、同时使用命名导出和默认导出、以及重命名导出，而导入也有着这四种常见的导入方式。至于{}，它是JavaScript中的对象字面量语法，在处理命名导出和命名导入时，就要用{}来解构这些导入导出。

当我们清理完我们的代码战场后，我们就可以得到一个干干净净的页面了

单文件组件剖析

在App.vue中输入vb3s快捷键，就会得到右边这些东西

这呢，是vue3的单文件组件的模板，包括三个主要部分：模板（template）、脚本（script）和样式（style），尽管现在是空的，不过我们可以用我们自己的代码去填满他。现在就让我们详细的了解一下。

<template>标签：这是Vue组件的HTML模板部分，定义了组件的UI结构。在该模板中，我们可以使用各种Vue指令和表达式来动态渲染数据。说白了，这里就是我们写html的地方
<script setup>标签：这是Vue 3中引入的一种新的脚本写法，称为<script setup>语法糖。它提供了一种更简洁的方式来编写组件的逻辑，无需像在Vue 2中那样使用选项API。在<script setup>中，我们可以直接定义和使用组合API提供的功能，如响应式状态、计算属性、生命周期钩子等。

这是vue2中的样式，这里官方直接将这些封装成setup直接加在<script setup>中。
js

代码解读

复制代码
<script> export default { setup () { return {} } } </script>
<style lang="scss" scoped>标签：这是Vue组件的css样式部分。lang="scss"表示我们使用SCSS（Sass的一种语法）来编写样式，不过我现在还是在用css来编写样式，所以都会将这里改为lang="css"。

scoped属性的作用是限制CSS样式的作用范围，使其只对当前组件内的元素生效，而不影响到其他组件或全局的元素。这是因为当我们在一个组件中定义样式时，如果不加限制，这些样式可能会“泄漏”到其他组件或页面的其他部分，导致意外的样式覆盖或冲突。

使用scoped属性可以解决这个问题，其原理是在编译阶段，Vue会为每个使用了scoped的组件生成一个唯一的CSS类，并将这个类添加到组件的每个元素上。然后，它会修改组件内的CSS规则，使其只对带有这个唯一类的元素生效。这样一来，即使两个组件使用了相同的类名或ID，它们的样式也不会互相干扰，因为每个组件的样式都被限制在其自己的作用域内。这样可以避免样式冲突。