Vue 框架-12-Vue 项目的详细开发流程

时间:2023-11-10 19:05:20

Vue 框架-12-Vue 项目的详细开发流程

首先,如果你还不了解 Vue 脚手架怎么搭建?

默认的环境中有哪些文件?

文件大概是什么作用?

那么,您要先查看之前的文章才有助于你理解本篇文章:

Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动

Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置

(一)Vue 组件及环境依赖介绍

大家打开 Vue 脚手架的环境,再打开搭建的项目中的入口文件 index.html 文件,这样:

Vue 框架-12-Vue 项目的详细开发流程

其实,你会发现里面 index.html 中就只有一行有用:

一个 div,id 为 app

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>first_pro</title>
</head>
<body>
<!-- id 为 app,具体定义在 main.js 中 -->
<div id="app"></div>
<!-- 内置文件将自动注入 -->
</body>
</html>

为啥连引入 js 都不需要呢?

这时候就会自然的想到我们 cmd 运行的一个环境,它是通过多个组件和组件之间的依赖组成的一个环境,不知道大家有没有注意到,打开环境的时候会有一个中间界面:

Vue 框架-12-Vue 项目的详细开发流程

它就是在构建一个我们的 Vue 的一个环境,使在环境中运行的 html 文件拥有里面的一些功能和内容:

简单说一下他们之前的依赖关系,首先是:

(1)package.json 配置文件,这里面定义了 dev ,当我们打开环境的时候不就是执行了一个 npm run dev 吗,npm 就是 Node Package Manager,他就依赖这样一个配置文件搭建环境:

Vue 框架-12-Vue 项目的详细开发流程

(2)然后它就会根据这个 dev 找到定义的 webpack.dev.conf.js 文件,这里面又有 index.html 文件的说明:

Vue 框架-12-Vue 项目的详细开发流程

(3)然后他就会找各个需要的组件文件,最终搭建成功一个环境,build 目录下的文件大家想看可以去看,我就不多说了,因为对开发来说,不是很重要。

(4)最重要的都知道一点,main.js 是最先执行的主 js 文件

(二)Vue 组件介绍及组件嵌套

下面,先要说的是 Vue 的组件,之前介绍的 Vue 默认的根组件 App.vue,后缀名是 .vue 的文件就是 Vue 项目中的组件,默认环境中还有一个就是在 src/components 下的 HelloWorld.vue 组件

想要搞清楚这些组件之间的关系,就要看 main.js 文件中,是怎么的一个依赖关系,也就是所谓的组件嵌套,来看 main.js (看注释):

// 用 “import” 命令加载 Vue 构建版本
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //from 会去找同级目录的 App.vue 根组件
import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
//要获取的 HTML 中 id 为 app 标签
el: '#app',
//组件要在 components 注册一下,这个 App 是上面 import 得到的一个 App
components: { App }, //默认的 template 模板(不可以随便改)
template: '<App/>'
})

(三)Vue 项目的详细开发流程

有人说了,我懂了他们之间的一个关系,那我还是不懂怎么个开发流程

(1)先构建自己的组件 User.vue(强烈建议放在 HelloWord.vue 同级目录),大家可以直接拷贝 App.vue 根组件的代码,作为一个框架,省事,易懂,再看一遍 App.vue 文件,其中有三部分,也是浏览器页面的三层(看注释):

<!--拓展一个面试小知识点:浏览器页面的有哪几层构成,分别是什么?
三层构成:结构层,表示层,行为层
分别是:HTML,CSS,JavaScript
--> <!--根组件都包含了-->
<!--1.结构层:html 模板-->
<template>
<!--注意:最外层只能是一对根标签,不能和其他标签并列-->
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template> <!--2.行为层:逻辑处理-->
<script>
// HelloWorld 是另外一个组件,需要在 components 里注册,下面有
import HelloWorld from './components/HelloWorld' export default {
name: 'App',
components: {
HelloWorld
}
}
</script> <!--3.表示层:css 样式-->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

(2)只创建组件 User.vue,实际是和项目分离的一个状态,下面就有把我们自己定义组件加到项目中,有两种方式:

  • (1)全局注册自定义组件(一般用于多次使用的公共元素):

    打开 main.js 文件,import 再 components,请看截图:

Vue 框架-12-Vue 项目的详细开发流程

这时候就已经完成全局注册,我们就可以在使用了,

【注意】:直接把 user 当做标签来使用

例如:打开 App.vue 文件,我们在他的结构层,就是最上面的 HTMl 模板代码块中,加上,打开环境,打开浏览器,就可以看到 user 组件中的内容了

 <user></user>
  • (2)局部注册组件:

    如果尝试了上面的全局注册,先在 main.js 文章注释掉刚才加的内容,打开 App.vue 组件,(注意代码位置在行为层)截图:

    Vue 框架-12-Vue 项目的详细开发流程

源代码:

<!--拓展一个面试小知识点:浏览器页面的有哪几层构成,分别是什么?
三层构成:结构层,表示层,行为层
分别是:HTML,CSS,JavaScript
--> <!--根组件都包含了-->
<!--1.结构层:html 模板-->
<template>
<!--注意:最外层只能是一对根标签,不能和其他标签并列-->
<div id="app">
<user></user>
</div>
</template> <!--2.行为层:逻辑处理-->
<script> //在根组件中 局部注册自定义组件
import User from './components/User' // HelloWorld 是另外一个组件,需要在 components 里注册,下面有
import HelloWorld from './components/HelloWorld' export default {
name: 'App',
components: {
"user":User
}
}
</script> <!--3.表示层:css 样式-->
<style> </style>

然后大家就可以去浏览器查看啦!!

上面就是整个一个开发流程

更多文章: