前端框架使用vue-cli（第二层：工程配置层--技术栈配置层配置）

本文章的核心是介绍

1.main.js文件

2.app.vue

3.setting.js

为什么需要这些文件，这些文件需要配置什么内容。

看前面的文章可以得知

1.main.js文件

main.js是webpack的打包入口

什么是打包的入口呢

我们知道，vue-cli的所有的代码内容，要形成一个完整的index.html文件

就需要一个起点，然后遍历到所有需要的文件

不管是vue-cli引入的依赖的js也好

还是自己写的js和vue代码也好

我们看一个具体的demo案例

javascript 复制代码

import Vue from 'vue'

import Cookies from 'js-cookie'

import 'normalize.css/normalize.css' // a modern alternative to CSS resets

import Element from 'element-ui'
import './assets/styles/element-variables.scss'

import '@/assets/styles/index.scss' // global css
import '@/assets/styles/jeethink.scss'
import App from './App'
import store from './store'
import router from './router'
import permission from './directive/permission'

import './assets/icons' // icon
import './permission' // permission control
import { getDicts } from "@/api/system/dict/data";
import { getConfigKey } from "@/api/system/config";
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, download, handleTree } from "@/utils/jeethink";
import { handleTreeAll } from "@/utils/mashibing";

import Pagination from "@/components/Pagination";
//自定义表格工具扩展
import RightToolbar from "@/components/RightToolbar"

// 全局方法挂载
Vue.prototype.getDicts = getDicts
Vue.prototype.getConfigKey = getConfigKey
Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.selectDictLabels = selectDictLabels
Vue.prototype.download = download
Vue.prototype.handleTree = handleTree
Vue.prototype.handleTreeAll = handleTreeAll

Vue.prototype.msgSuccess = function (msg) {
  this.$message({ showClose: true, message: msg, type: "success" });
}

Vue.prototype.msgError = function (msg) {
  this.$message({ showClose: true, message: msg, type: "error" });
}

Vue.prototype.msgInfo = function (msg) {
  this.$message.info(msg);
}

// 全局组件挂载
Vue.component('Pagination', Pagination)
Vue.component('RightToolbar', RightToolbar)

Vue.use(permission)

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online! ! !
 */

Vue.use(Element, {
  size: Cookies.get('size') || 'medium' // set element-ui default size
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

这个 main.js 本质上就是：

Vue 项目的"启动总控室"

相当于：

SpringBoot 的 Application.java

Android 的 Application

Node 的 app.js

C语言的 main()

它负责：

初始化环境
加载依赖
注册全局能力
启动 Vue
挂载页面

一、整体结构（先建立全局认知）

你这个 main.js 我帮你拆成：

text 复制代码

main.js
│
├── 1. 基础框架导入
├── 2. UI与样式初始化
├── 3. 核心模块导入
├── 4. 工具/权限/图标加载
├── 5. 全局方法挂载
├── 6. 全局组件注册
├── 7. 插件安装
├── 8. UI框架配置
├── 9. 创建Vue根实例

这其实就是：

text 复制代码

初始化环境
    ↓
注册能力
    ↓
配置框架
    ↓
启动应用

二、第一块：基础框架导入

js 复制代码

import Vue from 'vue'
import Cookies from 'js-cookie'

1. import Vue from 'vue'

这是：

text 复制代码

导入 Vue 核心框架

没有它：

js 复制代码

new Vue()

根本不能运行。

类似：

java 复制代码

import org.springframework.boot.SpringApplication;

引入：

text 复制代码

Cookie 操作库

作用：

js 复制代码

Cookies.get('size')
Cookies.set(...)

用于：

记住用户设置
token缓存
主题
字体大小
登录状态

你后面这里就用了：

js 复制代码

size: Cookies.get('size') || 'medium'

意思：

text 复制代码

读取用户之前设置的UI尺寸

三、第二块：UI与样式初始化

normalize.css

js 复制代码

import 'normalize.css/normalize.css'

作用：

text 复制代码

统一浏览器默认样式

因为：

不同浏览器默认样式不一样。

例如：

text 复制代码

Chrome 按钮边距
Firefox 字体间距
Edge 行高

都可能不同。

normalize.css：

text 复制代码

把浏览器差异"抹平"

类似：

text 复制代码

游戏引擎初始化默认参数

element-ui

js 复制代码

import Element from 'element-ui'

这是：

text 复制代码

UI组件库

提供：

按钮
表格
表单
Dialog
分页
Tree
Tabs

例如：

html 复制代码

<el-table>
<el-button>

就是它提供的。

element-variables.scss

js 复制代码

import './assets/styles/element-variables.scss'

作用：

text 复制代码

覆盖 Element 默认主题

比如：

你可以改：

scss 复制代码

$--color-primary: #409EFF;

实现：

text 复制代码

整个系统主题换色

类似：

text 复制代码

给系统换皮肤

index.scss

js 复制代码

import '@/assets/styles/index.scss'

全局CSS。

一般放：

body样式
通用margin
scrollbar
layout
reset

类似：

text 复制代码

整个项目的"世界规则"

jeethink.scss

js 复制代码

import '@/assets/styles/jeethink.scss'

这是：

text 复制代码

项目自己的业务样式

通常：

text 复制代码

index.scss = 通用基础规则
jeethink.scss = 项目个性化规则

四、第三块：核心模块导入

App.vue

js 复制代码

import App from './App'

这是：

text 复制代码

根组件

相当于：

text 复制代码

整个页面的大老板

Vue最终：

js 复制代码

render: h => h(App)

其实就是：

text 复制代码

把 App.vue 渲染出来

store

js 复制代码

import store from './store'

Vuex状态管理。

相当于：

text 复制代码

全局共享内存

用于：

用户信息
token
菜单
权限
缓存数据

类似：

text 复制代码

前端版 Redis

router

js 复制代码

import router from './router'

Vue Router。

负责：

text 复制代码

页面跳转

例如：

text 复制代码

/login
/system/user
/dashboard

对应不同组件。

类似：

text 复制代码

SpringMVC DispatcherServlet

五、第四块：工具/权限/图标

permission

js 复制代码

import permission from './directive/permission'

这是：

text 复制代码

自定义权限指令

比如：

html 复制代码

<div v-hasPermi="['system:user:add']">

意思：

text 复制代码

有权限才显示按钮

icons

js 复制代码

import './assets/icons'

加载 SVG 图标。

一般内部会：

js 复制代码

require.context(...)

自动注册所有svg。

实现：

html 复制代码

<svg-icon icon-class="user" />

permission.js

js 复制代码

import './permission'

这是：

text 复制代码

路由守卫

比如：

js 复制代码

router.beforeEach(...)

作用：

判断登录
判断token
页面拦截
动态菜单

类似：

text 复制代码

Spring Security Filter

六、第五块：API与工具函数

API

js 复制代码

import { getDicts } from "@/api/system/dict/data";

这是：

text 复制代码

调用后端接口

一般：

js 复制代码

axios.get(...)

封装好了。

utils工具

js 复制代码

import { parseTime } from "@/utils/jeethink";

这些是：

text 复制代码

工具函数库

类似Java里的：

text 复制代码

DateUtils
StringUtils
BeanUtils

七、第六块：为什么挂到 Vue.prototype

这是整个main.js最核心的思想之一。

这里：

js 复制代码

Vue.prototype.parseTime = parseTime

意思：

text 复制代码

把方法挂到Vue全局原型

于是：

所有组件都能直接：

js 复制代码

this.parseTime()

而不用：

js 复制代码

import { parseTime }

为什么这样设计？

因为：

这些方法：

text 复制代码

全项目都会频繁使用

所以：

text 复制代码

直接挂全局

更方便。

类似Java里的：

java 复制代码

static Utils.parseTime()

或者：

text 复制代码

Spring IOC 容器公共Bean

八、第七块：消息提示封装

success

js 复制代码

Vue.prototype.msgSuccess = function (msg) {
  this.$message({ showClose: true, message: msg, type: "success" });
}

这是：

text 复制代码

二次封装 ElementUI 消息提示

以后：

js 复制代码

this.msgSuccess("保存成功")

即可。

不用每次：

js 复制代码

this.$message({...})

为什么封装？

因为：

统一风格

所有提示：

都可关闭
样式统一
时间统一

降低重复代码

这是：

text 复制代码

大型项目非常重要的思想

九、第八块：全局组件注册

js 复制代码

Vue.component('Pagination', Pagination)

作用：

text 复制代码

全局注册组件

于是：

任何页面：

html 复制代码

<Pagination />

都能直接用。

不用：

js 复制代码

import Pagination

为什么这样做？

因为：

分页：

text 复制代码

使用频率极高

所以：

text 复制代码

全局注册

十、第九块：插件安装

Vue.use(permission)

js 复制代码

Vue.use(permission)

这是：

text 复制代码

安装Vue插件

Vue插件会执行：

js 复制代码

install(Vue)

内部可能：

注册指令
注入方法
添加组件

类似：

text 复制代码

SpringBoot Starter

十一、第十块：ElementUI初始化

js 复制代码

Vue.use(Element, {
  size: Cookies.get('size') || 'medium'
})

意思：

text 复制代码

安装 ElementUI

并设置：

text 复制代码

默认组件大小

例如：

text 复制代码

small
medium
mini

十二、第十一块：关闭生产提示

js 复制代码

Vue.config.productionTip = false

关闭：

text 复制代码

You are running Vue in development mode

那个提示。

十三、第十二块：真正启动Vue

终于到核心：

js 复制代码

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

这相当于：

text 复制代码

启动整个前端应用

el

js 复制代码

el: '#app'

意思：

text 复制代码

挂载到 index.html 的 #app

例如：

html 复制代码

<div id="app"></div>

router

注入路由系统。

全局都能：

js 复制代码

this.$router
this.$route

store

注入Vuex。

全局：

js 复制代码

this.$store

render

js 复制代码

render: h => h(App)

等价：

js 复制代码

template: '<App/>'

意思：

text 复制代码

渲染 App.vue

十四、整个main.js本质流程图

text 复制代码

导入Vue核心
    ↓
导入UI框架
    ↓
导入全局样式
    ↓
导入根组件
    ↓
导入路由系统
    ↓
导入状态管理
    ↓
导入工具与权限
    ↓
注册全局能力
    ↓
安装插件
    ↓
创建Vue实例
    ↓
渲染App.vue
    ↓
页面启动

十五、为什么大型项目一定会这样写？

因为：

大型项目核心思想：

text 复制代码

启动阶段统一初始化

否则：

每个页面都：

重复import
重复注册
重复配置

项目会：

text 复制代码

彻底失控

所以：

main.js 的本质是：

text 复制代码

"系统启动装配中心"

它负责：

text 复制代码

把整个前端生态组装起来

这其实已经很接近：

text 复制代码

SpringBoot 自动装配思想

了。

前端框架使用vue-cli（ 第二层：工程配置层--技术栈配置层配置）

1.main.js文件

一、整体结构（先建立全局认知）

二、第一块：基础框架导入

1. import Vue from 'vue'

2. import Cookies from 'js-cookie'

三、第二块：UI与样式初始化

normalize.css

element-ui

element-variables.scss

index.scss

jeethink.scss

四、第三块：核心模块导入

App.vue

store

router

五、第四块：工具/权限/图标

permission

icons

permission.js

六、第五块：API与工具函数

API

utils工具

七、第六块：为什么挂到 Vue.prototype

这里：

为什么这样设计？

类似Java里的：

八、第七块：消息提示封装

success

为什么封装？

统一风格

降低重复代码

九、第八块：全局组件注册

Pagination

为什么这样做？

十、第九块：插件安装

Vue.use(permission)

十一、第十块：ElementUI初始化

十二、第十一块：关闭生产提示

十三、第十二块：真正启动Vue

这相当于：

el

router

store

render

十四、整个main.js本质流程图

十五、为什么大型项目一定会这样写？

前端框架使用vue-cli（第二层：工程配置层--技术栈配置层配置）