vue3项目的搭建

vs插件准备
如果要使用vue3, 那么要把vue2使用的vetur插件禁用, 把vue使用的vue language features 插件启用,

如果使用ts语言, 就需要把typeScript vue plugin 插件启用, 如果用js语言就把typeScript vue plugin 插件禁用

创建项目

创建指令, 这一指令将会安装并执行 create-vue

npm init vue@latest
✔ Project name: … vue3TSDemo
✔ Package name: … vue3tsdemo
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

cd vue3TSDemo
npm install
npm run dev

当你准备将应用发布到生产环境时，请运行：

npm run build

安装需要的工具(按需引入)

一, 安装网络请求axios

安装

npm install axios --save

使用

1. 创建request.ts文件进行封装成工具

// 引入axios
import axios from "axios";
// 引入axios的配置类型
import type { InternalAxiosRequestConfig } from "axios";
// 引入toast提示, 用于提示错误信息
import { ElMessage } from "element-plus";

// 获取服务器地址
const baseUrl = "http://192.168.10.215:7777"

// 创建请求
const service = axios.create({
  // url = base url + request url
  baseURL: baseUrl,
  // request timeout
  timeout: 1000 * 30,
  // send cookies when cross-domain requests
  withCredentials: true
});

// request拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    // 设置header
    config.headers["appname"] = "mixi"

    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error)
  }
)

// response拦截器
service.interceptors.response.use(
  // @ts-ignore
  response => {
    // 清除所有提示
    ElMessage.closeAll();
    const res = response.data;
    if (res.code == 0) {
      return Promise.resolve(res);
    } else if (res.code == 1) {
      ElMessage.error(res.errorMsg);
      return Promise.reject(res);
    }
  },
  error => {
    ElMessage.closeAll();
    console.log(error);
    ElMessage.error('网络错误');
    return Promise.reject(error);
  }
)

export default service;

2. 创建api.ts文件

// 引入请求工具
import request from "@/utils/request"
// 登录接口
export function login( params:Object ) {
  return request({
    url: "/login/",
    method: "get",
    data: params
  })
}
// 获取验证码
export function loginMessage(params: Object) {
  return request({
    url: "/login/message/",
    method: "get",
    data: params
  })
}

3. 在vue文件中进行网络请求

import { login } from "@/api/api"
onMounted(() => {
  login({ user: "张三", pwd: "" }).then(res => {
    console.log(res);
  }).catch(error => {
    console.log(error);
  });
});

二, 安装css嵌套工具sass

安装

以前用vue-cli的时候，还要安装sass-loader、node-sass什么的，安装的时候还会遇到各种问题，但是vite其实安装sass就可以了，很简单

npm install sass -D

使用

按需引入并使用

<style scoped lang="scss">
.list{
  .list-item{
    .title{
    }
    .content{
    }
  }
}
</style>

三, 安装日期处理类库moment

安装

npm install moment --save

使用

要使用的vue文件中按需引入,

import Moment from "moment";

也可以挂载全局变量

Vue.prototype.$moment = moment;

使用方式

let date = Moment("2020-06-03", "YYYY-MM-DD").fromNow();

一般创建一个自定义工具类dateUtil.ts进行封装

import Moment from "moment";


// 按指定时间获取时间戳  默认获取当前时间时间戳
// dateStr 需要转化为时间戳的时间, 格式为 "YYYY-MM-DD", ? 代表可传, 可不传
export function dateTimestamp(dateStr?:any) {
  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: any, formatter?: any) {
  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: any) {
  // 需要转换的时间秒数量, 将字符串转换为数字
  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:string) {
  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;
}

四, 安装cookie管理工具js-cookie

npm install js-cookie --save

使用, 在需要使用的地方引入

import Cookies from "js-cookie";
// 组件中使用
// 写入cookie
Cookies.set('name', 'value')
// 读取
Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined
// 读取所有可见的cookie
Cookies.get()
// 删除某项cookie值
Cookies.remove('name')

五, 安装手机组件UI库vant

npm install vant --save

使用
在main.ts中引入并挂载

import vant from 'vant';
import 'vant/lib/index.css';
app.use(vant)

六, 安装实现移动端适配方案工具amfe-flexible

安装

npm install amfe-flexible --save
npm install postcss-px2rem --save-dev

使用
在项目根目录中, 新建 postcss.config.js, 并写入:

module.exports = {
  plugins: {
    'postcss-px2rem': {
      // viewportWidth: 375,  // 视窗的宽度，对应的是我们设计稿的宽度.
      // viewportHeight: 667, // 视窗的高度，对应的是我们设计稿的高度.(也可以不配置)
      // unitPrecision: 5, // 保留几位小数，指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      remUnit: 37.5,
      // selectorBlackList: ['tab-bar', 'tab-bar-item','shopping-cart-bottom-bar'], // 指定不需要转换的类
      // minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位.
      // mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
}

在 main.js 中引入 amfe-flexible 插件

import 'amfe-flexible'

七, 安装网页(饿了么)组件UI库element-plus

安装

npm install element-plus --save

使用
在main.ts中引入并挂载

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

八, 安装加载进度条nprogress

安装

npm install nprogress --save

九, 安装pinia需要使用的pinia-plugin-persistedstate插件来进行数据的存储

安装

npm install pinia-plugin-persistedstate --save

十, 安装可视化大屏自适应工具：autofit.js

安装

npm install autofit --save

十一, 安装图形或者边框生成组件

安装

npm install @kjgl77/datav-vue3 --save