前端技术选型及项目基础搭建

最新推荐文章于 2024-10-02 00:17:53 发布

Mask-CMZ

最新推荐文章于 2024-10-02 00:17:53 发布

阅读量550

点赞数

文章标签：前端大前端 javascript

本文链接：https://blog.csdn.net/mask0919/article/details/119816265

版权

本文探讨了如何选择Vue 2.0作为个人开发者和中小企业的首选前端框架，重点讲解了iview UI库的选择理由、项目环境配置、axios封装、路由拦截以及为何选择sessionStorage而非Vuex。还涉及到了SSO实现、权限控制和生产环境设置。

摘要由CSDN通过智能技术生成

前言：

目前前端框架由三大主流框架构成Vue、Angular、React，UI库更是层出不穷还有TypeScript超集等等

技术选型

但是对于个人开发者或者中小企业来说Vue更适合作为前端框架使用，因为Vue框架在国内目前是相对盛行的，入门简单、上手容易，人员招聘上以及开发进度上都能很好的把控住

搭建

选择的是Vue2.0，UI库是采用iview，为什么不采用大家较为熟知的elementUi，个人比较偏向iview虽然部分定制功能收费，但是容易上手，文档清晰。直接使用vue-cli生成项目目录，下面会一一分析

config  //配置文件夹
src    
  └─ api      //api配置，请求拦截请求响应
  | └─index.js
  ├─ router    //路由配置，路由拦截路由相应
  | └─index.js
  ├─ views
  └─ main.js
package-lock.json
package.json
vue.config.js    //webpack配置

环境配置

项目肯定有不同环境配置，开发环境，测试环境，生产环境
在config文件下配置

module.exports = {
    //开发环境
    development:{
       target:'http://111.111.111:8080',      //需要指向的IP
       wsTarget:'http://111.111.111:8080',  //websocket地址
       staticTarget:'http://111.111.111:8080'  //静态服务地址
    },
    //测试环境  同上
    test:{ },
    //生产环境   同上
    production:{}
}

安装

npm install --save-dev cross-env

在package.json中配置指定的环境命令

"dev": "cross-env NODE_ENV=development vue-cli-service serve",
"dev-build": "cross-env NODE_ENV=development vue-cli-service build"

在vue.config.js中即可指定相应的环境

const config = require('./config/index')
const target = config[process.env.NODE_ENV].target

module.exports = {
    devServer:{
        proxy:{
            '/':{
                target:target, 
                ws:true,
                changOrigin:true
            }
        }
    }
}

axios配置

可以在api文件夹下统一封装axios，包括状态码拦截，请求头添加，上个简单的代码

import axios from 'axios';

//封装post请求
function postMethon(url, data, header){
    return new Promise((resolve, reject) => {
        axios.request({
            url:url,
            method:'post',
            data:data,
            headers:{
                'Content-Type': 'application/json; charset=UTF-8',
            }
        })
        .then(res => {
            //这里可以不直接resolve，可以在封装一个状态码校验的方法过滤一下
            resolve(res)
        })
        .catch(error => {
            reject(error)
        })
    })
}

路由拦截

一般路由拦截适用于的场景比较多的是登录，或者是SSO单点登录

router.beforeEach((to, from, next) => {
    //如果进入的不是登录页并且用户信息不存在
    if(to.name != 'login' && !sessionStorage.getItem('userInfo')){
        //你想干嘛
     }else{
       next()
    }
})

也有人问为什么不用Vuex，我个人更倾向于sessionStorage，因为Vuex在定义初始值，去动态改变后手动刷新页面，Vuex的值会初始化，so还是sessionStorage
还有SSO的实现方式，以及按钮级别颗粒度的用户权限控制，以及灰度发布的实现等等等…