vue项目常用配置

作者: FM_0138 | 来源:发表于2023-11-08 18:06 被阅读0次

Nginx | 常用配置
vue.config.js更细粒度的配置webpack
Vue Cli3 项目配置
123、Vue Cli3 项目配置
Vue Cli3 项目配置
vue3+element-plus配置cdn
vue实战|vue项目搭建及基本配置
Vue.config.js各个属性说明
开发速记-typescript篇: vue集成
vue 项目常用加载器及配置

新建好vue项目后, 还需要配置一些常用的配置, 例如常用文件夹, 工具等;

格式化配置

eslint设置

使用prettier格式工具时, 可能会出现一些, 不能用单(双)引号, 不能用分号等提示, 可以在.eslintrc.js中rules:使用以下配置去掉

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prettier/prettier": "off",
    "no-undef": 0,
    "no-unused-vars": "off",
    "vue/no-unused-vars": "off",
    "vue/no-unused-components": "off",
},

style的SASS (SCSS)设置

安装SASS (SCSS) 用于生成css工具类，和less差不多

npm i -D sass sass-loader

在/src/assets/scss文件夹下创建两个文件，varibale.scss(公共变量)文件用来存变量(写上颜色，字体，背景的属性等配置文件)，styleUtil.scss用来定义工具类。

在 varibale.scss 中定义变量
变量
声明变量的语法是：$ + 变量名 + ：+ 变量值；如下

$color:red; //声明变量 $color

默认变量
默认变量只需要在变量值后加上 !default , 用来设置默认值，对默认变量进行重新声明可以实现覆盖默认值；如

$color:red !default; //声明默认变量 $color
$color:purple; //根据需求覆盖默认变量
.father01 {
   color:$color;
}

区分全局变量和局部变量

$height:200px; //全局变量声明不在大花括号内
$bgcolor:blue;
body {
   .father01 {  //嵌套
      width:$width;
      height:$height;
      $border:1px solid red; //局部变量是声明在元素内的
      border: $border;
      $bgcolor:purple; //全局变量和局部变量名一致时，调用局部变量进行覆盖
      background-color: $bgcolor;
   }
}

变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局变量
border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
}

变量计算

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局变量
border-#{$left}:2px solid purple; //使用字符串插值之前必须先声明
}

·继承
继承 .class 使用 @extend

.container {
   color:purple;
   border:2px dashed purple;
}
.myText {
   @extend .container; //这里将继承.container类的所有样式
   font-size: 22px;
}

重复代码块，使用混合@mixin命令定义，以及使用@include调用该mixin

@mixin normalStyle {
   //使用@mixin命令定义可重复使用的代码块
   width:300px;
   height:100px;
   color:black;
   background-color:lightblue;
}
.container {
   @include normalStyle;
   //使用@include 命令引用@mixin定义的代码块
}

在使用@mixin和@include时，传入参数和默认值

@mixin normalStyle($width,$height,$color,$defaultValue:orange) {
   width:$width;
   height:$height;
   color:$color;
   background-color:$defaultValue;
}
.container {
   @include normalStyle(300px,100px,green,lightgray);
}

SCSS使用编程式方法

.container {
   p {
      @if 1+1<3 {
         border:1px solid blue;
      } @else {
         border:1ps dashed palevioletred;
      }
   }
}

for循环
在sass中的@for循环有两种方式：
①@for $i from <start> through <end> ②@for$ i from <start> to <end>
其中$i表示变量，start表示开始值，end表示结束值；
through表示包括end这个数值；to表示不包括end这个数值；

//for 循环
@for $i from 1 to 5 {
   .item-#{$i} {
      border:#{$i}px solid;
   }
}
//while 循环
$m:8;
@while $m > 0 {
   .items-#{$m} {
      width:2em*$m;
   }
   $m:$m - 2 ;
}
//这里可以对$m进行运算 让它每次都减去2
//each 语法
@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
   .#{$item} {
      background-color:purple;
   }
}

在 style.scss 中定义工具类
在main.js入口文件中引入工具类

// 工具样式SASS（类似于less）
import './assets/scss/style.scss'

在 /src/views/ArticleView.vue 文件中使用工具类，并通过SCSS语法规则编写css可以进行嵌套层级


<style lang="scss">
.page-article {
  .article-body {
    img {
      max-width: 100%;
      height: auto;
    }
  }
  .icon-back {
    font-size: 1.5rem;
  }
}

新建常用文件夹

在src路径下,新建文件夹: utils, api.

utils: 存放工具类
api: 存放接口
manager: 管理类

utils文件夹

存放工具, 新建一些常用工具类, 详细解释在下面:

utils

request.js: 网络请求工具, 就是网络请求封装

安装axios

npm install axios --save

在根目录创建项目的配置文件envconfig.js

// 项目名称
const projectName = 'wechat'
// 项目版本
const projectVersion = '4.4.4'

// develop 开发环境服务器
const developServiceBaseUrl = 'http://192.168.10.215:7777'
// product 发布环境服务器
const productServiceBaseUrl = 'https://gate1.thedoc.cn:8080'
// product 发布环境域名(线上域名如: baidu), 判断使用哪个服务器用
const productDomainName = 'wx.thedoc.cn'

const envconfig = {
  projectName: projectName,
  projectVersion: projectVersion,
  developServiceBaseUrl: developServiceBaseUrl,
  productServiceBaseUrl: productServiceBaseUrl,
  productDomainName: productDomainName
}

export default envconfig

request.js代码

import envconfig from '../../envconfig.js'
// 引入axios
import axios from 'axios'
import store from '@/store'

// baseurl, 默认开发环境
let baseUrl = envconfig.developServiceBaseUrl

// 根据网址环境, 判断使用哪个服务器
if (window.location.hostname === envconfig.productDomainName) {
  // 如果是正式环境, 就替换为线上服务器
  baseUrl = envconfig.productServiceBaseUrl
}

// 创建请求
const service = axios.create({
  // 服务器
  baseURL: baseUrl,
  // 设置超时时间
  timeout: 1000 * 10
})

// request请求拦截器
service.interceptors.request.use(
  config => {
    // 设置请求项目的名称
    config.headers.projectname = envconfig.projectName
    // 设置请求项目的版本
    config.headers.projectversion = envconfig.projectVersion;

    // 设置请求项目的token
    console.log('store.user.token');
    console.log(store.getters['user/token']);
    store.dispatch('user/token', '7')
    console.log(store.getters['user/token']);

    if (store.getters['user/token']) {
      config.headers.token = store.getters['user/token'];
    }
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error)
  }
)

// response响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (!res) {
      return Promise.reject(new Error({
        errorMsg: '网络异常, 请重试...'
      }))
    } else if (res.code === 0) {
      return Promise.resolve(res)
    } else if (res.code === 1) {
      return Promise.reject(res)
    } else if (res.code === 2) {
      return Promise.reject(res)
    }
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

使用
在api.js中

import request from '@/utils/request'
import qs from 'qs'
/* 获取验证码 */
export function phloginCode (params) {
  return request({
    url: '/user/phlogincode/',
    method: 'post',
    data: qs.stringify(params)
  })
}

dateTimeUtil.js: 时间工具, 包括年, 月, 日, 时间的获取, 转化等一系列相关常用操作

安装moment

npm install moment --save

使用

import Moment from "moment";


// 按指定时间获取时间戳  默认获取当前时间时间戳
// dateStr 需要转化为时间戳的时间, 格式为 "YYYY-MM-DD", 
export function dateTimestamp(dateStr) {
  let stamp = new Date().getTime();
  if (dateStr) {
    stamp = new Date(dateStr).getTime();
  }
  return stamp;
}

// 时间戳转化为指定日期格式 默认转化为格式为 'YYYY-MM-DD hh:mm'
// timestamp: 需要格式化的时间戳, 
// formatter: 需要转化成的格式, 
export function dateFormatterTimestamp(timestamp, formatter) {
  let format = 'YYYY-MM-DD hh:mm:ss';
  if (formatter) {
    format = formatter;
  }
  const stamp = new Date(timestamp);
  const date = Moment(stamp).format(format);
  return date;
}

// 将时间秒数, 转化为几小时几分几秒
export function dateSecondsChangeToHours(seconds) {
  // 需要转换的时间秒数量, 将字符串转换为数字
  const secondsValue = parseInt(seconds); 
  // 天个数
  let day = 0; // 分
  // 小时个数
  let hour = 0; // 分
  // 分钟数
  let minute = 0; // 小时
  // 秒个数
  let second = 0; // 天
  // 秒数转化为分钟数
  if (secondsValue > 60) {
    // 如果秒数大于60秒, 计算有多少分钟
    minute = secondsValue / 60;
    // 计算剩余的秒数
    second = secondsValue % 60;
    // 继续将分转化为小时
    if (minute > 60) {
      // 如果分钟数大于60秒, 计算有多少小时
      hour = minute / 60;
      // 计算剩余的分钟数
      minute = minute % 60;
      // 继续将小时转化为天
      if (hour > 24) {
        // 大于24小时
        day = hour / 24;
        hour = hour % 24;
      }
    }
  } else {
    second = secondsValue;
  }
  let result = "";
  // // 秒加0格式问题
  // if (second < 9) {
  //   second = "0" + second;
  // }
  // // 分加0格式问题
  // if (minute < 9) {
  //   minute = "0" + second;
  // }
  // // 小时加0格式问题
  // if (hour < 9) {
  //   hour = "0" + second;
  // }
  // // 天加0格式问题
  // if (day < 9) {
  //   day = "0" + second;
  // }
  result = day + "天" + hour + "小时" + minute + "分钟" + second + '秒';
  return result;
}

// 根据出生日期(生日)计算年龄, 出生日期格式为 1970-01-01
export function getAgeFromBirthday(birthday) {
  let age = 0
  if (birthday) {
    // 格式化时间格式
    if (birthday.search('.') != -1) {
      birthday = birthday.replace(/\./g, "-")
      console.log(birthday)
    }
    const birthdayArray = birthday.split('-');
    const nowDate = new Date();
    const today = [nowDate.getFullYear(), nowDate.getMonth() + 1, nowDate.getDate()];
    const ageArray = today.map((val, index) => {
      return val - Number(birthdayArray[index]);
    })
    if (ageArray[2] < 0) {
      const lastMonth = new Date(today[0], today[1], 0);
      ageArray[1]--;
      ageArray[2] += Number(lastMonth.getDate);
    }
    if (ageArray[1] < 0) {
      ageArray[0]--;
      ageArray[1] += 12;
    }
    age = ageArray[0] + 1;
  }
  return age;
}

randomUtil.js: 随机工具, 包括获取随机数, 随机字符等一系列相关随机获取

// num: 随机字符串的个数, 默认是1, strArray需要随机的字符串数组
export function randomStr(strArray, num) {
  // 定义默认字符串范围
  let chatArray = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m", "A", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "Z", "X", "C", "V", "B", "N", "M", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
  // 如果传入了指定的字符串, 则随机范围改成传入的
  if (strArray && strArray.length) {
    chatArray = strArray;
  }
  let length = 1;
  if (num && num >= 1) {
    length = num;
  }
  let result = "";
  for (let i = 0; i < length; i++) {
    const index = Math.floor(Math.random() * 1000) % chatArray.length;
    result += chatArray[index];
  }
  return result;
}

checkUtil.js: 校验工具, 包括身份证校验, 手机号校验, 位数校验, 等一系列相关校验

// 校验工具, 身份证, 手机号

// 校验身份证号 idCard: 身份证字符串
export function checkIdCard (idCard) {
  //15位和18位身份证号码的正则表达式
  let regIdCard =
    /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;
  //如果通过该验证，说明身份证格式正确，但准确性还需计算
  if (regIdCard.test(idCard)) {
    if (idCard.length == 18) {
      //将前17位加权因子保存在数组里
      let idCardWi = new Array(
        7,
        9,
        10,
        5,
        8,
        4,
        2,
        1,
        6,
        3,
        7,
        9,
        10,
        5,
        8,
        4,
        2
      ); 
      let idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); //这是除以11后，可能产生的11位余数、验证码，也保存成数组
      let idCardWiSum = 0; //用来保存前17位各自乖以加权因子后的总和
      for (let i = 0; i < 17; i++) {
        idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
      }
      let idCardMod = idCardWiSum % 11; //计算出校验码所在数组的位置
      let idCardLast = idCard.substring(17); //得到最后一位身份证号码
      //如果等于2，则说明校验码是10，身份证号码最后一位应该是X
      if (idCardMod == 2) {
        if (idCardLast == "X" || idCardLast == "x") {
          return true;
        } else {
          return false;
        }
      } else {
        //用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
        if (idCardLast == idCardY[idCardMod]) {
          return true;
        } else {
          return false;
        }
      }
    }
  } else {
    return false;
  }
}

// 校验手机号 phone手机号字符串
export function checkPhone (phone) {
  //15位和18位身份证号码的正则表达式
  let regPhone = /^[1]([3-9])[0-9]{9}$/;
  //如果通过该验证，说明身份证格式正确，但准确性还需计算
  if (regPhone.test(phone)) {
    return true;
  } else {
    return false;
  }
}

api文件夹

api按照功能或者模块进行分类

login.js: 包含与登录, 登出相关的接口

import request from '@/utils/request'
import qs from 'qs'
/* 获取验证码 */
export function phloginCode (params) {
  return request({
    url: '/user/phlogincode/',
    method: 'post',
    data: qs.stringify(params)
  })
}

api.js: 可以放自己想要的接口(或者另建js文件)
image.png

vuex 分类

router 分类

新建常用工具

js-cookie
安装

npm install js-cookie --save

使用
在需要的文件引入

import Cookies from "js-cookie"
Cookies.set('name', 'value');

vant
安装

npm i vant@latest-v2 -S

使用
由于项目中使用到的vant组件比较多, 所以我们可以单独建立一个vant.js文件进行引入, 然后再统引入到main.js中
vant.js

// 按需全局引入 vant组件
import Vue from "vue";

import {
    Button,
    List,
    Cell,
    Tabbar,
    TabbarItem,
    Sidebar,
    SidebarItem,
    CellGroup,
    Icon,
    AddressList,
    SwitchCell,
    Area,
    Popup,
    Tab,
    Tabs,
    Sticky,
    Collapse,
    CollapseItem,
    Checkbox,
    CheckboxGroup,
    TreeSelect,
    Picker,
    Overlay,
    Image as VanImage,
    Empty,
    PullRefresh,
    ImagePreview,
    Form,
    Field,
    Radio,
    RadioGroup,
    Tag,
    Stepper,
    Swipe,
    SwipeItem,
    DatetimePicker,
    Loading,
    Search,
    Badge,
    Dialog,
    ActionSheet,
    IndexBar,
    IndexAnchor,
    Uploader
} from "vant";
Vue.use(ActionSheet);
Vue.use(Dialog);
Vue.use(Badge);
Vue.use(Search);
Vue.use(Button);
Vue.use(Cell).use(CellGroup);
Vue.use(List);
Vue.use(Tabbar).use(TabbarItem);
Vue.use(Sidebar).use(SidebarItem);
Vue.use(Icon);
Vue.use(AddressList).use(SwitchCell);
Vue.use(Area).use(Popup);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Sticky);
Vue.use(Collapse);
Vue.use(CollapseItem);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(TreeSelect);
Vue.use(Picker);
Vue.use(Overlay);
Vue.use(VanImage);
Vue.use(Empty);
Vue.use(PullRefresh);
Vue.use(ImagePreview);
Vue.use(Form);
Vue.use(Field);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Tag);
Vue.use(Stepper);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(DatetimePicker);
Vue.use(Loading);
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(Uploader);

main.js

import "./utils/vant";

安装element-ui

npm i element-ui -S

使用
新建elementui.js

import Vue from "vue";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 挂载
Vue.use(ElementUI);

main.js

import "./utils/element-ui";

Nginx | 常用配置
Nginx 常用功能常用配置详解 Nginx 部署 Vue 项目将 Vue 项目build打包后生成的 ...
vue.config.js更细粒度的配置webpack
vue2.0之后配置都写在vue.config.js文件中，这篇文章说一下项目常用的配置配置项目根路径和指定端口...
Vue Cli3 项目配置
一、新建项目使用 vue-cli3 构建一个初始的Vue项目：Cli3 官方文档以下配置是我在项目中常用的，大...
123、Vue Cli3 项目配置
一、新建项目使用 vue-cli3 构建一个初始的Vue项目：Cli3 官方文档以下配置是我在项目中常用的，大...
Vue Cli3 项目配置
一、新建项目使用vue-cli3构建一个初始的Vue项目：Cli3 官方文档以下配置是我在项目中常用的，大家可...
vue3+element-plus配置cdn
1，项目配置最近在做一个项目，项目配置版本如下： vue：3.2.6 vue-router：4.0.11 vue...
vue实战|vue项目搭建及基本配置
前言注：适用于windows系统本文讲述要点： vue-cli项目搭建基本环境配置；常用插件描述及分享；项目...
Vue.config.js各个属性说明
查看webpack配置项目规则指令查看vue所有webpack的配置项查看webpack插件配置项目 vue....
开发速记-typescript篇: vue集成
安装nix并配置channel: 安装yarn 安装vue 创建vue项目 emacs 编辑项目启动vue项目
vue 项目常用加载器及配置
vue 项目常用加载器及配置 1.安装sass: 1.1 由于sass-loader依赖于node-sass，所以...