vue项目初始化内容

文档说明

本文档是结合自己开发经验和网上资料整理的一份基础框架搭建方式，以参考为主，具体使用一定要注意结合项目实际情况进行调整

强烈建议要有的

vue.config.js

主要针对最新的基础配置项，整体配置对项目的针对性比较强，建议按需选择，如果要进行更深层的配置，可以查阅cli和webpack相关配置

vue.config.js

const { defineConfig } = required("@vue/cli-service")
module.exports = defineConfig({
    publicPath: "./",  // 部署应用包时的基本URL，将资源设置为相对路径，这样打包文件可以被部署在任意路径
    // (process.env.NODE_ENV === "production" ? "/" : "/") 可以根据环境选择不同的配置
    
    filenameHashing: true,  // 静态资源在文件名中包含hash（true是默认值，如果不关闭可以不写这个）
    lintOnSave: "default",  // eslint错误是否影响编译，可以选择"warning"或true让eslint只警告，不影响编译，建议不要改
    productionSourceMap： false,  // 打包时是否需要map文件，一般不需要
    devServer: {
        client: {
            overlay: false,   //编译错误时，取消全屏覆盖（建议关掉，晃眼）
        },
        compress: true,  // 启用gzip压缩，就是以压缩文件的格式请求html、css、js文件，可以提高请求速度（注意老旧浏览器，服务器需要添加配置）
        // (https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/)
        host: "localhost",   // 指定启动服务的host，可以设置成ip地址，以方便其它人员访问
        port: 8080,  // 服务器的默认端口，可以设置为auto自动使用一个可用端口
        open: true,  // 服务启动后是否自动打开默认浏览器
        /* 设置后台服务器代理 */
        proxy: {
            "/api": {  // 需要代理的请求
                target: "http://0.0.0.0:8080",  // 要请求的后台地址
                pathRewrite: { "^/api": "" }    // 如果不希望传递/api，可以替换掉
            }
        }
    }
})

css

初始化样式

主要取消html标签一些默认样式，统一标签整体风格，方便在开发中使用；

建议命名为base.css(scss/less)，写好一份初始样式，在大部分项目中都能直接引用

如果初始化样式不是很多，也可以直接写到下面的public文件中

此处提供了一份基本初始化样式，仅供参考，可以根据具体项目进行调整

/*
 设置初始高度，统一字体
*/
html, body {
    height: 100%;
    font-family: "Microsoft YaHei";
    font-size: 14px;
}
/*
 去掉内外边距
*/
html, body, p, ul {
    margin: 0;
    padding: 0;
}
/*
 去掉默认样式
*/
ul, li {
    list-style: none;
}
a {
    text-underline: none;
    font-family: "Microsoft YaHei";
}
i {
    font-style: normal;
}
/* 
 统一h系列标签风格
*/
h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: 0;
}
/* 
 可以为常用h标签设置需要的样式
*/
h1 {
    font-size: 18px;
    font-weight: 400;
}

公共样式

提供一些通用的公共样式，方便在开发过程中直接使用，也可以将系统整体的基本样式元素定义在这里，方便统一修改；

建议命名为public（如果还有其它样式文件，建议使用多单词驼峰命名方式命名）

例如：

/*
 清除浮动
*/
.clearflex:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.clear {
    zoom: 1;
}
/*
 红色字体
*/
.red-text{
    color: #FF5800;
}
/*
 灰色字体
*/
.gray-text{
    color: #cccccc;
}
/*
 浮动
*/
.float-right {
    float: right;
}
.float-left {
    float: left;
}

使用方式

main.js/ts

import 'base.css';
import 'public.css';

js

一般可以提供一个名为common.js/ts的文件，主要用来提供一些全局使用的公共方法，如日期处理、金额数字处理等，并以$common字段全局注入项目

使用：各组件中以this.$common，注意一些非vue方法而是自己写的方法中this的指向，建议多使用箭头函数

引入方式

vue2

common.js

export default {
    // 相关方法
}

main.js

import Vue from "vue";
export common from "common.js";
vue.property.$common = common;

vue3

common.js

const common = {
    // 相关方法
}

export default {
    install (app, options) => {
        app.config.globalProperties.$common = common;
    }
}

main.js

import { createApp } from "vue";
import App from "./App.vue";
import common from "common.js";

createApp(App).use(common);

vue3 + ts

在ts中有点特殊，需要通过模块扩充告诉ts添加了这些新property，主要是common文件要添加额外内容，main文件和前面保持一致

common.ts

const common = {
    // 相关方法 注意方法用static修饰
    static test() {}
}

export default {
    install (app, options) => {
        app.config.globalProperties.$common = common;
    }
}

declare module "@vue/runtime-core" {
    export interface ComponentCustomProperties {
        $common: typeof Object;
    }
}

ajax

Vue中建议使用axios，由于使用的频繁，建议同common一样全局注入进行使用

示例

httpMethod.ts
// 注入方式参考common，此处重点写方法

import axios from "axios";

// 设置跨域请求是否携带cookie，设置为true后，后端需要配置响应头，根据项目需要确认是否开启
axios.defaults.withCredentials = true; 

//设置默认请求格式
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 设置请求头附带token信息，一般使用token验证用户信息的话建议放在请求头Authorization字段里
axios.defaults.headers.common["Authorization"] = store.state.token;
// 或者使用拦截器方式（这两种方法好像都可以添加token，实际项目尝试一下吧）
axios.interceptors.request.use( 
    config => {
        if(store.state.token) {
            config.headers.common["Authorization"] = store.state.token;
        }
        return config;
    },
    err => {
        //请求错误的做法
        return Promise.reject(err);
    }
)

// response拦截器(主要为了统一处理一些错误响应)
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if(error.response) {
            switch (error.response.status) {
                case 401:
                    // do something
                    break;
                case 500: 
                    // do something
                    break;
                default:
                    // do something
                    break;
            }
        }
        return Promise.reject(error.response.data);
    }
)

/**
 *  post 请求方法
 *  @params queryApi
 *  @params queryParams
 *  @returns {Promise}
 */
// 此处暂时还用js语法做示例，可以通过类的方式改成ts参数
function post（{queryApi, queryParams}）{
    return new Promise((resolve, reject) => {
        axios.post(
            queryApi, 
            queryParams
        ).then(
            response => {
                resolve(response.data);
            },
            err => {
                reject(err);
            }
        )
    })
}

export default {
    install (app, options) => {
        app.config.globalProperties.$post= post;
    }
}

// 只以post进行举例，get请求类似，根据项目需要看是否需要添加put和delete请求
// 另外建议将axios也添加到全局，以免后续出现特殊请求需要特殊处理

ui框架

建议初期结合实际项目筛选两到三个ui框架，然后由产品和ui人员结合想要实现的页面风格进行最后选择，后期ui人员在设计中也可以参考ui框架中的一些元素，减少基础样式类的调整

引入

ui框架一般建议选择全部引入的方式，基本一个项目下来使用覆盖率能达到百分之七八十

vue3相关ui框架推荐

vant，移动端样式框架，ui样式简洁、清晰，官方文档也通俗易懂

Element plus，element ui火爆程度确实可以，主要是ui样式很不错，但感觉plus不怎么好用，官网都乱七八糟的，看个人情况选择

Ant design vue，看网上介绍在组件上会更完善，在配置项上比较丰富，适合大型、复杂的系统

Naive UI，性能优异、可定制型强、支持ts，被vue作者转发后带来大量流量（新生ui框架，建议还是等别人踩踩坑，出了问题网上解决方案少，框架升级频率可能会超出想象）

其它插件（按需选择）

建议：前端插件参差不齐，尽量不要把插件做为首选方式，优先自己实现功能，如果使用插件，尽量选择使用度广泛、稳定的插件，使用插件尽量了解一下其实现的原理

注：下面内容不固定，有好的插件随时添加记录

图表

首选echarts，基本上市面上能看到的数据可视化都是用echarts来实现的，当然如果自己喜欢画图和动画，也可以自己研究，使用方式参考官网配置项，东西比较多，记住怎么查就行，现用现查

引入

推荐按需引入，一般都会只使用几种图形

打印

Printjs，相对来说比较稳定，打印功能也比较齐全，使用起来也很简单

posted @ 2022-06-25 11:13 前端泥石流阅读(349) 评论(0) 收藏举报

刷新页面返回顶部

可能是最菜的博客