Vue3项目搭建与基础知识详解
创建Vue项目
首先,我们先去创建一个名为vue-introduce的Vue项目,要怎么创建呢?
-
打开命令行终端,输入下命令,用于创建我们的Vue项目:
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>
中。<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,它们的样式也不会互相干扰,因为每个组件的样式都被限制在其自己的作用域内。这样可以避免样式冲突。
总结
对于初学者小白来说,在这种初学状态下,我们还是要对这些有个详细的了解的,以至于以后我们可以从容不迫的去编译属于我们自己的代码,总要弄清楚这些是干嘛,到底是怎么个事,对吧。之后我们就该学习一下Vue3中的一些ApI了。
转载自:https://juejin.cn/post/7388091090350571546