3项目实战

Vue项目实战

一、产品开发的大致流程

一般公司流程如下：

1、产品经理设计产品原型图
2、UI设计师设计符合需求的原型UI图
3、前端100%还原高保真UI设计图
4、后端设计接口
5、前后端接口联调
6、前后端功能自测
7、测试、运维进行产品的测试和上线

一般大型公司流程如下：

1、需求侧提出需求
2、SE进行需求分析并输出需求文档
3、开需求分析会（甲方、SE、开发、测试）
4、相关开发人员投入开发，开发完毕后进行自测且输出自测报告
5、合并代码到dev分支后进行申请转测
6、运维部署项目，测试人员开始测试并记录相关问题(开发跟进问题)
7、需求实现后合并代码到生产分支发布上线

二、项目搭建

局部安装vue-cli 4.5.15 和项目创建：

npm init -y # 初始化项目依赖文件
cnpm i -D @vue/cli # 安装脚手架
npx vue -V # 查看vue-cli版本号
npx vue create project-one # 创建项目
# OR
npx v
1
2
3
4
5
6

三、项目配置

1. 自动打开项目

// vue.config.js
module.exports = {
    devServer: {
        open: true
      	// host: 'localhost'
    }
}
1
2
3
4
5
6
7

2. 在项目中使用ElementUI
   官网：[https://element.eleme.cn/#/zh-CN]

• 2.1 全局使用

  • 2.1.1 安装

      npm i element-ui -S
  1

  • 2.1.2 在main.js中完整引入

      // main.js
      import ElementUI from 'element-ui';
      import 'element-ui/lib/theme-chalk/index.css';
  
      Vue.use(ElementUI);
  1
  2
  3
  4
  5

  • 2.1.3 使用参考官方示例,其组件使用特点是都是el-标签名

  <el-button>demoel-button>
  1

• 2.2 按需使用

  • 2.2.1 安装

      npm i element-ui -S
      npm i babel-plugin-component -D
  1
  2

  • 2.2.2 在.babel.config.js新增以下内容

      "plugins": [
          [
              "component",
              {
                  "libraryName": "element-ui",
                  "styleLibraryName": "theme-chalk"
              }
          ]
      ]
  1
  2
  3
  4
  5
  6
  7
  8
  9

  • 2.2.3 在main.js中引入

      // main.js
      import { Button, Tag } from 'element-ui'
  
      Vue.use(Button)
      Vue.use(Tag)
  1
  2
  3
  4
  5

  • 2.2.4 或者在项目目录下新建plugins文件夹,新建element.js文件

      // element.js
      import Vue from 'vue'
      import { Button, Tag } from 'element-ui'
  
      Vue.use(Button)
      Vue.use(Tag)
  1
  2
  3
  4
  5
  6

      // main.js
      import '../plugins/element.js'
  1
  2

  • 2.2.5 在组件中使用

      <el-button>demoel-button>
      <el-tag>标签一el-tag>
  1
  2

3. 在项目中使用CSS预处理器Scss
   官网：[https://www.sass.hk/]

• 3.1 安装

cnpm i sass-loader@7 node-sass@4 -S
1

• 3.2 使用

<style lang="scss">style>
1

4. 在项目中使用CSS预处理器Less
   官网：[https://www.sass.hk/]

• 4.1 安装

cnpm i less@3 less-loader@7 -S
1

• 4.2 使用

<style lang="less">style>
1

5. 使用reset.css
   任何一个项目都需要做样式重置,这里我们使用官方的样式重置内容，如果需要补充可以自己手动添加。
   官网: [https://meyerweb.com/eric/tools/css/reset/]
   我们把代码复制下来放在项目中新建的reset.css文件,然后在app.vue的style中进行引入使用:

@import url('./assets/css/reset.css');
1

6. font-awesome图标库的使用
   官网：[https://fontawesome.dashgame.com/]

• 6.1 安装

cnpm i font-awesome -D
1

• 6.2 在main.js中引入

// main.js
import 'font-awesome/css/font-awesome.min.css'
1
2

• 6.3 使用

<i class='fa fa-users'>i>
1

7. 使用axios
   官网:[http://www.axios-js.com/]

• 7.1 下载axios

cnpm i -S axios
1

• 7.2 使用axios

// main.js
import axios from 'axios'

Vue.prototype.axios = axios // 挂载到原型,可在全局使用
1
2
3
4

8. 配置路由

• 8.1 下载vue-router

cnpm i vue-router -S
1

• 8.2 配置路由(新建router文件夹和index.js文件)

// index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            component: Home
        }
    ],
    mode: 'history'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 8.3 挂载使用

// main.js
import router from './router'

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7

<router-view>router-view>
1
2

• 8.4 路由懒加载
  • 8.4.1 官方推荐的方法,使用ES中的import
    component: () => import(‘@/components/Login’)
  • 8.4.2 使用Vue异步组件
    component: resolve => require([‘@/components/Home’], resolve)
  • ,

四、页面实现

简单的进行首页、登录页、404页面的搭建
登录页功能(LoginOne、LoginTwo、Login)

开启后端服务器，进行登录接口的数据交互。那就需要对axios进行二次封装

五、Axios的二次封装以及跨域的处理

• Axios二次封装,在src文件夹下新建service.js,写入封装的内容,然后再在main.js中引入service

// service.js
import axios from 'axios'

const service = axios.create({
    // baseURL会自动加在接口地址上
    baseURL: "/api",
    timeout: 3000 // 指定请求的超时毫秒数，如果请求超过这个时间，那么请求就会中断。
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
    // 在发送请求前做些什么
    // 获取并设置token
    // console.log(getToken('token'))
    // config.headers['token'] = getToken('token')
    return config
},(error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    console.log(response)
    let { status, message } = response.data
    if (status !== 200) {
        Message({message: message || 'error', type: 'warning'})
    }
    return response
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
})

export default service
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// main.js
import service from './service'

Vue.prototype.service = service // 挂载到原型,可在全局使用
1
2
3
4

• 跨域的处理在vue.config.js中设置代理

// vue.config.js
module.exports = {
    devServer: {
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:3000/',
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

重启项目，即可进行登录页的登录功能的数据交互,登录成功需要存储用户名和token
这里我们去新建一个setToken.js去封装一下设置token和获取token以及删除token的方法
然后在axios的二次封装的请求头里携带上token,至此,我们的axios二次封装和跨域完美解决。

此时我们就可以去写主页面的内容了,菜单组件和主要内容区域。新建common组件文件夹,新建对应的Header、Footer、Menu这些文件,然后完成Menu菜单,并且新建学生列表、作业列表、信息列表、考勤管理页面，并且配置路由，之后去写面包屑组件。这样我们项目的大致模型就有了。