# 前端工程化

# 基本概念介绍

软件工程：可行性分析、需求分析、设计（概要设计、详细设计）、软件开发、测试、实施（运维）

前端工程化：独立的设计、独立的开发；独立测试；独立运维

为了实现更加方便的前端工程化，Vue的技术栈提供了一个非常方便的工具：脚手架

脚手架可以非常方便快速的让前端开发人员基于前端工程化的模式进行项目开发。

# 脚手架基本使用

目标：熟悉脚手架用法

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

安装脚手架

npm install -g @vue/cli

查看版本号

# 如果看到了版本号就证明安装成功了
vue --version

基于脚手架创建项目

# project-demo 为项目的名称
vue create mydemo

启动项目

# 切换到项目目录
cd mydemo
# 启动项目
npm run serve

浏览器地址栏输入如下网址，如果能看到页面效果，证明项目已经启动成功

http://localhost:8080/

# 脚手架项目结构分析

目标：熟悉脚手架创建项目代码的基本结构

|-public  -----------------------------------------------单页面
|-src  --------------------------------------------------项目源代码
	|-assets  -------------------------------------------项目用到的相关资源
	|-components  ---------------------------------------Vue组件
	|-App.vue  ------------------------------------------项目跟组件
	|-main.js  ------------------------------------------项目入口文件
|-.gitignore  -------------------------------------------git配置文件（忽略文件管理）
|-babel.config.js  --------------------------------------babel配置文件（控制ES6编译）
|-package.json  -----------------------------------------项目包管理文件
|-README.md  --------------------------------------------项目说明文档

# ES6模块化开发

Node.js中的模块化导入和导出

导出：module.exports

导入：require

目标：熟悉ES6模块化规则相关用法

一个js文件就是一个ES6模块

模块成员导出

// 导出一个变量
export let info = 'hello'

// 导出一个函数
export const showInfo = function () {
  console.log('nihao')
}

// 导出一个对象，并且是默认导出（default关键字只能出现一次）
export default {
  msg: 'tom',
  uname: 'jerry'
}

模块成员导入

// 导入ES6模块的成员
// 单个成员的导入（对象的解构赋值用法）
// import {info, showInfo} from './module/01.js'
// console.log(info)
// showInfo()
// ----------------------------
// 导入全部成员
// import * as obj from './module/01.js'
// console.log(obj.info)
// obj.showInfo()

// ---------------------------
// 导入默认的成语(如果是默认导出，那么在导入时可以随便起一个名字)
// import obj from './module/01.js'
// console.log(obj.msg)
// console.log(obj.uname)

// ----------------------------
// 默认导入和单个导入可以结合使用
// obj就是默认导入，名字自定义
// info和showInfo是按需导入
import obj, {info} from './module/01.js'
console.log(obj)
console.log(info)
// showInfo()

# 入口文件分析

目标：熟悉入口文件相关代码业务逻辑

// 导入Vue核心构造函数
import Vue from 'vue'
// 导入跟组件
import App from './App.vue'

// 配置开发提示信息
Vue.config.productionTip = false

// 实例化跟组件
new Vue({
  // render的作用：生成组件模板，类似于template作用
  render: h => h(App),
}).$mount('#app')
// $mount('#app')的作用类似于el: '#app'的作用，用于挂载组件到页面容器div中。

productionTip启用后的提示信息

# 单文件组件

目标：熟悉单文件组件的基本结构

<template>
  <div id="app">
    <!-- 组件模板 -->
  </div>
</template>
<script>
// 组件配置选项
export default {
  name: 'App'
}
</script>
<style>
/* 这里添加组件相关样式 */
</style>

单文件组件的组成

template用来提供组件的模板
script用来提供组件的配置选项
style用来提供组件的样式