Vue 06 下

Vue 06

前端工程化

基本概念介绍

软件工程：可行性分析、需求分析、设计（概要设计、详细设计）、软件开发、测试、实施（运维）
前端工程化：独立的设计、独立的开发、独立测试、独立运维
为了实现更加方便的前端工程化，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模块化开发

CommonJS模块化规范
1.导出 module.exports = {}
2.导入 require()

Node.js中的模块化导入和导出
导出：module.exports
导入：require

基本的导入导出

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

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

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

总结：
1.通过export关键字导出模块成员（包括变量和函数）
2.通过import {成员变量} from ‘模块路径’ 实现导入

默认导出用法

// 通过export default方式实现默认导出
// 默认导出只能有一个
const fn = function () {
  console.log('hello')
}
export default {
  info: 'nihao',
  fn: fn
}

// 导入默认的信息，此时可以自定义名称，并且不可以添加花括号解构
import obj from './module/m2.js'
console.log(obj.info)
obj.fn()

总结：
1.默认导出只能有一个
2.导入默认信息可以自定义名称，但是不可以在自定义名称外面包裹花括号

有名字导出和默认导出结合使用

// 基本导出和默认导出结合使用

// 有名字的导出
export const msg = 'hello'
// 默认导出
export default {
  info: 'nihao'
}

// 导入默认和有名字导入结合
// 默认导入写到前面，解构导入写后面
import obj, { msg } from './module/m3.js'
console.log(obj.info)
console.log(msg)

总结：
1.默认导入写到前面，结构导入写后面
2.两者可以结合使用

入口文件分析

// 导入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中。

总结：入口文件实现了根组件挂载页面的功能

单文件组件

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

单文件组件的组成
1.template用来提供组件的模板
2.script用来提供组件的配置选项
3.style用来提供组件的样式