vue说明文档

来源：互联网发布：蓄水池压力的算法编辑：程序博客网时间：2024/06/03 20:24

## 快速开始

``` bash

# 安装依赖

npm install

# 开启本地开发服务器，监控项目文件的变化，实时构建并自动刷新浏览器 localhost:8080

npm run dev

# 使用生产环境配置构建项目，构建好的文件会输出到 "dist" 目录

npm run build

# 使用生产环境配置构建项目查看打包代码分析报告

npm run build --report

```

## 目录结构

```shell

├── build # 构建脚本

├── config # 构建脚本配置文件

├── dist # 编译自动生成的部署文件

├── mock # 数据mock

├── node_modules # npm 包

│

├── src # 源文件目录

│ ├── api # api 目录

│ │ ├── index.js # 对外导出

│ │ ├── url-types.js # 所有的url

│ │

│ ├── assets # 资源目录，包括 css、img 等

│ │ ├── img

│ │ ├── scss

│ │ ├── ...

│ ├── components # 公共组件

│ ├── config #配置项

│ ├── libs # 第三方及 utils 工具库

│ ├── routes # 页面路由

│ ├── service # 页面服务

│ ├── store # 状态管理

│ ├── views # 页面view

│ │ ├── home # home页

│ │ │ ├── components # 页面内部组件目录

│ │ │ ├── index.vue # 页面根组件

│ │ │ ├── ...

│ │ ├── ...

│ ├── app.vue # vue 根实例

│ ├── main.js # 入口

│

├── index.html # html 入口文件

├── package.json # 包管理

├── README.md

├── .babelrc # babel 配置文件

├── .editorconfig # 编辑器基础配置同步

├── .eslintrc # eslint 配置文件

├── .postcssrc # postcss 插件配置，包括 autoprefixer、post-pxtorem等

│

```

## 前后端分离

### API 请求抽离

为实现分层，所有的API请求抽离到API目录中

用法如下：

```

# url-types.js 中定义所有的 API 接口

export default {

user: {

getProfile: {

url: '/user/getProfile',

method: 'post'

getDetail: '/user/getDetail',

}

};

/**

* 根据url-types.js 自动生成api接口，接口为 Promise 形式

* 生成接口有两个参数：

* @param {Object} params 请求参数

* @param {Object} config 请求配置-参见 [axios]

import api from '@/api';

api.user.getProfile(params, config).then((data)=>{

})

```

### mock 数据

> 前后端分离后，开发前需要和后端同学定义好接口信息（请求地址，参数，返回信息等），前端通过 mock 的方式，即可开始编码，无需等待后端接口 ready。

我们利用 express 中间件机制添加 mock 功能，在 mock 目录下添加文件，每个接口对应一个文件, 文件内容如下:

```

module.exports = {

// 接口地址

api: '/user/getProfile',

// 返回数据

response: {

status: 1,

data: {

name: 'vue'

}

```

在 config 的 dev 中进行开启或关闭

```

dev: {

env: require('./dev.env'),

...

mock: false // 是否开始数据mock

}

```

## 移动端适配

> 项目采用 REM 进行适配处理，动态给`<html>`元素添加`font-size`属性，并且动态改写`font-size`的值

我们利用 [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 自动进行 px 到 rem 的转换

部分配置项如下，配置文件位于`.postcssrc.js`：

```

{

rootValue: 64, # rem 基准值

unitPrecision: 5, # 小数点位数

}

```

根据拿到的设计稿设置 rem 基准值，目前设计稿主要是 640/750, 对应的基准值是 64/75，在设定好基准值后，我们在css文件直接写对应的设计稿 px 值。

## 组件化

> 设计和完成一个 Web App 之前，最好先构思好如何构建各个组件，哪些组件需要被复用到，哪些页面是要切换的

整个应用通过 Vue 组件的方式搭建，每个页面都可以分解为如图的组件系统

![](https://user-gold-cdn.xitu.io/2016/11/29/d9aae7b58480c50e814d25742ef36eb2.png)

整个 App 的组件树结构如下：

```

├── app.vue # 应用根组件

├── view1.vue # 页面级组件，放在views目录里

│ ├── component1.vue # 功能组件，公用的放在 components 目录，否则放在 views 子目录

│ ├── component2.vue

├── view2.vue

│ ├── component1.vue

│ ├── component2.vue

│

```

## 数据中心化

数据中心化借助 [Vuex](https://github.com/vuejs/vuex) 实现，如果应用较为简单，不推荐使用，可使用 `$root.data` 配合 [global event bus](https://cn.vuejs.org/v2/guide/components.html#非父子组件通信) 来实现。

store 用于处理数据状态读写和同步，以及数据输入输出的格式化处理，vuex 机制如下图所示：

![](https://vuex.vuejs.org/zh-cn/images/vuex.png)，

整个store的结构如下：

```

├── store

├── index.js # 组装模块并导出 store 的地方

├── actions.js # 根级别的 action

├── mutations.js # 根级别的 mutation

├── mutation-types.js # 所有的 mutation 常量类型

├──modules

│ ├── qrcode.js # 二维码模块

│ ├── bank.js # 银行卡模块

│

```

## 路由

基于[Vue-Router](https://router.vuejs.org/zh-cn/index.html) 的路由实现

整个routes的结构如下：

```

├── routes

├── index.js # 组装模块并导出 store 的地方

├── home.js # home router

├── bank.js # bank router

│

```

> 为解决打包构建包过大，我们把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，结合 Vue 的异步组和 Webpack 的 code splitting feature, 来实现路由组件的懒加载。

## 样式规划

我们采用 Sass CSS 预处理器来组织样式文件，样式主要涉及几个方面：

- 基准样式设置，包括样式重置，变量设置等

- 通用组件样式和mixin等

- 堆叠次序管理

阅读全文

0 0