Vue CLI 脚手架工程化开发
一、生命周期
Vue 的生命周期：一个 Vue 实例从创建到销毁的整个过程，new Vue() 创建实例，网页关闭销毁实例。
生命周期的四个阶段：创建、挂载、更新、销毁。
Vue生命周期过程中，会自动运行一些函数，被称为生命周期钩子，让开发者可以在特定阶段运行自己的代码。响应式数据创建完之后，才可以发送初始化渲染请求，挂载完之后，才可以操作 dom。
这些方法需与 data 同级使用，方法体内编写自定义语句。
<script>
//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数
const app = new Vue({
el: '#app',
data: {
obj: {
words: '',
count: ''
}
},
beforeCreate() {
console.log('响应式数据准备好之前')
},
created() {
console.log('响应式数据准备好之后')
},
beforeMount() {
console.log('模板渲染之前')
},
mounted() {
console.log('模板渲染之后')
},
})
</script>
二、工程化开发
开发 Vue 的两种方式：
① 核心包传统开发，直接引入 Vue 核心包开发；
② 工程化开发，基于构建工具开发（例如 webpack）。
1. 脚手架介绍
Vue CLI 是 Vue 官方提供的一个全局命令工具，可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子，集成了 webpack 配置。
好处：
① 开箱即用，零配置；
② 内置了 babel 等工具；
③ 标准化 。
2. 使用步骤
① 全局安装，yarn global add @vue/cli 或 npm i @vue/cli -g
② 查看 Vue 版本，vue --version
③ 创建项目架子，vue ceate project-name
项目名不能用中文，想在哪里创建项目，就在哪里打开 cmd 窗口。
然后通过上下键选择 Vue2，点回车创建架子：
④ 启动项目，首先通过 cd 项目名 进入项目目录，然后输入 yarn serve 或 npm run serve 启动项目。
3. 目录文件介绍
在VSCode 中打开项目，Ctrl + ` 启动终端，输入 npm run serve 运行项目
项目运行流程：先运行 main.js → 导入 Vue → 导入 App.vue → 实例化 Vue，基于 App.vue 创建结构，最后渲染到 index.html 容器！
4. 组件化开发
组件化：一个页面可以拆分成一个个的组件，每个组件有着自己独立的结构、样式和行为。
好处：便于维护，利于复用，提升开发效率。
组件分类：普通组件和根组件（App.vue），根组件是整个应用最上层的组件，包裹所有普通小组件
组件由三部分组成：结构（template）、行为（script）和样式（style），结构里面有且只能有一个根元素，js 逻辑写在 export default 里面。
语法高亮插件：Vetur
<template>
<!--根元素的类名最好与当前的组件名同名-->
<div class="App">
<div class="box" @click="fn"></div>
</div>
</template>
<script>
/**
* 导出的是当前组件的配置项
* 里面可以提供data、methods、computed、watch、生命周期
*/
export default {
methods: {
fn() {
alert('栈老师你好！')
}
}
}
</script>
<style>
.App {
width: 400px;
height: 400px;
background-color: yellowgreen;
}
.App .box {
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
默认情况下是不支持 less 的，让 style 支持 less：
① 给 style 加上 lang=“less” 属性；
② 安装依赖包，yarn add less less-loader -D
快速生成组件的三部分：输入 <vue，回车！
5. 普通组件的注册
5.1 局部注册
只能在注册的组件内使用：创建 .vue 文件（三部分组成），在使用的组件内导入并注册。
① 导入组件
import 组件对象 from '.vue的文件路径'
② 注册组件
export default {
components: {
组件名: 组件对象
}
}
组件名规范 → 大驼峰命名法，如 ZzHeader，一般来说，组件名和组件对象同名，我们直接简写一个组件对象即可。
③ 使用组件
直接当成 html 标签来使用，<组件名></组件名>
完整代码如下：
5.2 全局注册
在所有组件内都可以使用。
① 导入全局组件
import 组件对象 from '.vue的文件路径'
② 在 main.js 中注册全局组件
Vue.component('组件名', 组件对象)
Vue.component 一次只能注册一个组件！
③ 使用组件
直接当成 html 标签来使用，<组件名></组件名>
一般情况下我们使用局部注册就可以了，如果有一些组件是通用的，那么就使用全局注册！
三、页面开发思路
① 分析页面，按模块拆分组件，搭架子；
② 根据设计图，编写组件 html 结构和 css 样式；
③ 拆分封装通用小组件，将来通过 js 动态渲染，实现功能。
当前模块的结构和样式都写在同一个 vue 里面，无需再创建单独的 css 文件，高内聚低耦合。
如果要多次渲染同一个组件，我们也可以使用 v-for 来实现：
<组件名 v-for="item in list" :key="item"></组件名>
原文地址：https://blog.csdn.net/m0_52861684/article/details/143594870
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！