1.前期准备

需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，所有的请求数据都使用Mock.js进行模拟。相关知识需要自己去相关网站学习。

Node安装地址：http://nodejs.cn/download/
Git安装地址： https://git-scm.com/
Vue官方网站：https://cn.vuejs.org/
Element-ui官方网站：https://element.eleme.cn/#/zh-CN/component/table
Mock.js官网: http://mockjs.com/
ES6教程：https://es6.ruanyifeng.com/
axios官网：http://www.axios-js.com/

2.安装框架

本项目在vue-admin-template的基础上进行二次开发，建议同时安装vue-admin-template和vue-element-admin，把vue-element-admin当做工具箱或者集成方案仓库，想要什么功能或者组件就去vue-element-admin那里复制过来。这样可以避免冗余代码并加快开发速度。

2.1 安装vue-admin-template

#克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git
#进入项目目录
cd vue-admin-template
#安装依赖
npm install
#建议不要用cnpm安装，会有各种诡异的bug
#可以通过如下操作解决npm下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
#本地开发 启动项目
npm run dev

启动完成后会自动打开浏览器访问 http://localhost:9528 ，你看到下面的页面就代表操作成功了。

vue-element登录界面

2.2 安装vue-element-admin

git clone https://github.com/PanJiaChen/vue-element-admin.git
#进入项目目录
cd vue-element-admin
#安装依赖
npm install
#建议不要用cnpm安装，会有各种诡异的bug
#可以通过如下操作解决npm下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
#本地开发 启动项目
npm run dev

启动完成后会自动打开浏览器访问 http://localhost:9527，你看到下面的页面就代表操作成功了。

vue-element登录界面

2.3 问题解决

2.3.1安装依赖问题

输入命令npm install --registry=https://registry.npm.taobao.org安装依赖时，如果出现以下错误：

安装依赖错误

解决方法：

步骤一：执行git config --global url."https://".insteadOf git://

步骤二：再次执行npm install --registry=https://registry.npm.taobao.org

出现以下即安装成功

安装依赖成功

2.3.2 启动错误

如运行npm run dev出现以下错误：

启动错误

解决方法：

步骤一：执行npm rebuild node-sass

步骤二：执行npm run dev

2.3.3 浏览器启动两次

运行npm run dev浏览器启动两次

解决方法：

步骤一：将vue.config.js文件里面devServer下面的open选项改为open:false

步骤二：在package.json中把scripts下的dev属性配置后面加上--open

"scripts": {
    "dev": "vue-cli-service serve --open"
}

步骤三：重新启动

3 目录结构

该开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

项目结构

4 功能开发

4.1 新增页面

如新增一个excel页面：

步骤一：在src/views下新建页面文件

新建页面

一般性一个路由对应一个文件，该模块下的功能组件或者方法就建议在本文件夹下创建一个utils或components文件夹，各个功能模块维护自己的utils或components组件。如：

新建组件

步骤二：在src/router/index.js中增加你需要添加的路由；

{
    path: '/excel',
    component: Layout,
    redirect: '/excel/export-excel',
    name: 'excel',
    meta: {
        title: 'excel',
        icon: 'excel'
    }
    children: [{
        path: 'export-excel',
        component: () => import('@/views/excel/exportExcel'),
        name: 'exportExcel',
        meta: { title: 'exportExcel' }
    }]
}

如果children下面只声明了一个路由不会有展开箭头，如果children下面的路由个数大于1就会有展开箭头。如果你想忽视这个自动判断可以使用alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由。

新建成功

Excel页面

4.2 多级目录(嵌套路由)

如果你的路由是多级目录，比如有三级路由嵌套的情况下，不要忘记还要手动在二级目录的根文件下添加一个。原则上有多少级路由嵌套就需要多少个。

多级路由

4.3 新增api

写功能模块代码时，api不要直接写在页面中，而要在src/api文件夹下创建本模块对应的api服务。因为随着业务的迭代，模块会越来越多，所以建议根据业务模块来划分views，并且将views和api两个模块一一对应，从而方便维护。如下图：

View和Api结构

如article模块下放的都是文章相关的api，这样不管项目怎么累加，api和views的维护还是清晰的，对于全区公用的api模块，单独放置就行。

api示例：

import request from '@/utils/request'

export function fetchList(query) {
    return request({
        url: '/vue-element-admin/article/list',
        method: 'get',
        params: query
    })
}

export function fetchArticle(id) {
    return request({
        url: '/vue-element-admin/article/detail',
        method: 'get',
        params: { id }
    })
}

4.4 新增组件

在src/components下写全局的组件，如富文本，各种搜索组件，封装的日期组件表格组件等等能被公用的组件。每个页面或者模块特定的业务组件写在src/views/当前模块/components/下。如：src/views/article/components/xxx.vue。这样拆分大大减轻了维护成本。

4.5 新增样式

页面的样式和组件是一个道理，全局的src/style放置一下全局公用的样式，每一个页面的样式就写在当前views下面，请记住加上scoped或者命名空间，避免造成全局的样式污染。

Style结构

5. 与服务端进行交互

5.1 前端请求流程

在本框架中，一个完整的前端UI交互到服务端处理流程是这样的：

1）UI组件交互操作；

2）调用统一管理的api service请求函数；

3）使用封装的request.js发送请求；

4）获取服务端返回；

5）更新data；

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在src/api文件夹中，并且一般按照model纬度进行拆分文件。

其中，src/utils/request.js是基于axios的封装，便于统一处理POST，GET等请求参数，请求头，以及错误提示信息等。它封装了全局request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

5.2 请求例子

// api/article.js
import request from '../utils/request';
export function fetchList(query) {
    return request({
        url: '/article/list',
        method: 'get',
        params: query
    })
}

// views/example/list
import { fetchList } from '@/api/article'
export default {
    data() {
        list: null,
        listLoading: true
    },
    methods: {
        fetchData() {
            this.listLoading = true;
            fetchList().then(response => {
                this.list = response.data.items;
                this.listLoading = false;
            });
        }
    }
}

5.3 设置多个baseURL

5.3.1 方法一：设置环境变量

我们可以通过环境变量设置多个baseURL，从而请求不同的api地址。

    # .env.development
    VUE_APP_BASE_API = '/dev-api' #注入本地api的根目录
    VUE_APP_BASE_API2 = '/dev-api2' #注入本地api的根目录

之后根据环境变量创建axios实例，让它具有不同的baseURL。 @/utils/request.js

// create an axios instance
const service = axios.create({
    baseURL: process.env.BASE_API, // api的base_url
    timeout: 5000 // request timeout
})

const service2 = axios.create({
    baseURL: process.env.BASE_API2, // api的base_url
    timeout: 5000 // request timeout
})

5.3.2 方法二：直接覆盖

在src/api中直接覆盖baseURL

export function fetchList(query) {
    return request({
        url: '/article/list',
        method: 'get',
        params: query,
        baseURL: 'xxx' // 直接通过覆盖的方式
    })
}

6. Mock数据

Mock数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。

本项目在本地会启动一个mock-server来模拟数据，是完全基于webpack-dev-serve来实现的，所以在你启动前端服务的同时，mock-server就会自动启动。本项目的所有请求都是通过封装的request.js进行发送的，所有的请求都设置了一个baseURL，而这个baseURL又是通过读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的，这样方便我们做到不同环境使用不同的api地址。

6.1 移除

如果你不想使用mock-server的话只要在vue.config.js中移除devServer中before这个Middleware就可以了。

image

注意：移除后需重启服务

6.2 新增

如果你想添加mock数据，只要在根目录下找到mock文件，添加对应的路由，对其进行拦截和模拟数据即可。

比如我现在在src/api/user中需要添加一个登录的接口login，首先新建接口：

export function login(data) {
    return request({
        url: '/portal/login',
        method: 'post'
        data
    })
}

声明完接口之后，我们需要找到对应的mock文件夹mock/user.js，在下面创建一个能拦截路由的mock接口

// user login
{
    url: '/portal/login',
    type: 'post',
    response: config => {
        const { username } = config.body;
        const token = tokens[suername];
        
        // mock error
        if (!token) { ... }
        return { message: '登录成功' };
    }
}

6.3 修改

最常见的操作就是：你本地模拟了了一些数据，待后端完成接口后，逐步替换掉原先mock的接口。将mock的数据切换为真实后端数据，只要在mock下找到对应的路由，将它删除即可。这时候你可以在network中，查看到真实的数据。

6.4 多个server

可以一部分接口走这个服务，另一些接口走另一个服务。

步骤一：只需要将它们分别设置不同的的baseURL即可。 src/utils/request.js

步骤二：之后根据设置的url规则在 vue.config.js 中配置多个proxy。

6.5 不同环境使用不同的数据

通过设置环境变量来做到不同环境下，请求不同的api地址

# .env.development
VUE_APP_BASE_API = '/dev-api' #注入本地api的根路径

# .env.production
VUE_APP_BASE_API = '/prod-api' #注入线上api的根路径

之后根据环境变量创建axios实例，让它具有不同的baseURL。 src/utils/request.js

// create an axios instance
const service = axios.create({
    baseURL: process.env.BASE_API, // api的base_url
    timeout: 5000 // request timeout
})

本项目中，新增了一个mock环境：

首先在package.json中添加mock脚本

"scripts": {
    "dev:mock": "vue-cli-service serve --open --mode mock",
    "dev": "vue-cli-service serve --open"
}

然后，添加环境变量文件

.env.mock

7. 构建和发布

当项目开发完毕，只需要运行一行命令就可以打包你的应用：

# 打包正式环境
npm run build:prod

# 打包预发布环境
npm run build:stage

构建打包成功之后，会在根目录生成dist文件夹，里面就是构建打包好的文件，通常是***.js 、***.css、index.html等静态文件。

如果需要自定义构建，比如指定dist目录等，则需要通过config的outputDir进行配置。

8. 其他

本项目开启了eslint，运行npm run lint -- --fix自动修复一些简单的错误

Vue-Element前端框架搭建注意事项

1.前期准备

2.安装框架

2.1 安装vue-admin-template

2.2 安装vue-element-admin

2.3 问题解决

2.3.1安装依赖问题

2.3.2 启动错误

2.3.3 浏览器启动两次

3 目录结构

4 功能开发

4.1 新增页面

4.2 多级目录(嵌套路由)

4.3 新增api

4.4 新增组件

4.5 新增样式

5. 与服务端进行交互

5.1 前端请求流程

5.2 请求例子

5.3 设置多个baseURL

5.3.1 方法一：设置环境变量

5.3.2 方法二：直接覆盖

6. Mock数据

6.1 移除

6.2 新增

6.3 修改

6.4 多个server

6.5 不同环境使用不同的数据

7. 构建和发布

8. 其他

你可能感兴趣的:(Vue-Element前端框架搭建注意事项)