Vue 框架-12-Vue 项目的详细开发流程
首先,如果你还不了解 Vue 脚手架怎么搭建?
默认的环境中有哪些文件?
文件大概是什么作用?
那么,您要先查看之前的文章才有助于你理解本篇文章:
Vue 框架-10-搭建脚手架 CLI + 批处理快捷启动
Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置
(一)Vue 组件及环境依赖介绍
大家打开 Vue 脚手架的环境,再打开搭建的项目中的入口文件 index.html 文件,这样:
其实,你会发现里面 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 的一个环境,使在环境中运行的 html 文件拥有里面的一些功能和内容:
简单说一下他们之前的依赖关系,首先是:
(1)package.json 配置文件,这里面定义了 dev ,当我们打开环境的时候不就是执行了一个 npm run dev 吗,npm 就是 Node Package Manager,他就依赖这样一个配置文件搭建环境:
(2)然后它就会根据这个 dev 找到定义的 webpack.dev.conf.js 文件,这里面又有 index.html 文件的说明:
(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,请看截图:
这时候就已经完成全局注册,我们就可以在使用了,
【注意】:直接把 user 当做标签来使用
例如:打开 App.vue 文件,我们在他的结构层,就是最上面的 HTMl 模板代码块中,加上,打开环境,打开浏览器,就可以看到 user 组件中的内容了
<user></user>
- (2)局部注册组件:
如果尝试了上面的全局注册,先在 main.js 文章注释掉刚才加的内容,打开 App.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>
然后大家就可以去浏览器查看啦!!
上面就是整个一个开发流程