# blog_front_v2.0

**Repository Path**: cangeer/blog_front_v2.0

## Basic Information

- **Project Name**: blog_front_v2.0
- **Description**: 博客2.0
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-10-17
- **Last Updated**: 2022-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# blog_front_v2.0

## Project setup
```
//安装依赖
npm install
//运行
npm run serve
//打包
npm run build
```

## 一、为什么要这个MODEL => **架构**
vue-cli非常强，但是这个强体现在模块化和数据渲染的优越性，在真正的大型复杂的项目开发，
缺少结构化，工程化的架构思想，即当各种各样的包和插件，组件混合在一起，我们应该如何优雅，具有高可维护性，稳定性
的组织文件，然后在这个架构下，去编程。

## 二、这个MODEL到底做了什么
各各功能模块的分离
- router 专门管理路由文件
- layout 管理页面模板级别的组件
- view 管理页面级别的组件
- store 管理状态 vuex 集成 vue-cookie
- service （很多开发者喜欢叫api）请求服务器端的数据方法
- config 项目的基本配置（全局通用）。注意，config由于在Import下，它是只有一次导入，所以其导出的对象数据的属性是可写的，但是注意process.env和其属性是不可操作的
- core 管理和Vue框架有关的插件，集成mixin、filter、plugin ；注意，推荐一些强依赖性的插件导入在前（main.js 模块引入的顺序）
- assets
  - image
  - css
  - svg 为svg loader 做组件模块加载
    ```javascript
    config.module.rule('svg')
    .exclude.add(resolve('src/assets/svg'))
    .end();

    config.module
    .rule('svg-component') // rule 是定义一个规则的名字
    .test(/\.svg$/) // test 是匹配规则
    .include.add(resolve('src/assets/svg'))
    .end()
    .use('vue-svg-loader')
    .loader("vue-svg-loader")
    ```

## 三、评价一下这个MODEL
极大的方便日常的开发，只需要跟着这个架构走，进行一些简单的页面和逻辑编写，
就能驾驭大型应用的开发


## 四、附录
### (1) 一些配置为什么要这么做的原因
.env 的配置是无法修改的
```javascript
process.env.VUE_APP_CALLBOARD = '$Notice' //trow error

cosnt envConfig = process.env
console.log(process.env === envConfig) //false 说明地址值一直在变化
```
### (2) config 为什么可以修改
import之下，从入口文件开始，任何经过扫描，导入一次之后存储数据为缓存，下次再次扫描到导入操作，从缓存中拿取
```javascript
//data.js
export default {
  value: 1,
}

//deal-data.js
import Data from './data.js'
Data.value = 2 

//main.js
import 'deal-data.js' // 先执行，缓存Data值
import Data from './data.js' //获取缓存的Data
console.log(Data.value) // 2
```