[Практические навыки] Как получить доступ к общим инструментам разработки Vue3+Vite

внешний интерфейс Vue.js
[Практические навыки] Как получить доступ к общим инструментам разработки Vue3+Vite

Vue3Официальная версия давно вышлаVue3лучшие инструментыViteОн также был введен в действие, и в этой статье рассказывается, как интегрировать в проект некоторые часто используемые инструменты.

включатьvue-router , vuex , typescript , sass , axios , elementUI , vant. и конфигурацияпеременная среды, фейковые данныеmockЖдать.

Новый каталог проекта

Введите команду, после чего вам будет предложено ввести название проекта, выбрать стек технологий, который вы хотите использовать, и следовать подсказкам!

//yarn
yarn create @vitejs/app
//npm
npm init @vitejs/app

конфигурационный файл

ViteФайл конфигурацииКорневая директориявнизvite.config.js.

существуетviteсерединаvueЕго нужно внедрить в виде плагина, но скаффолдинг написан, просто разберитесь.

При использованииTS, сначала необходимо установить файл объявления типа.

npm install --save-dev @types/node

импортированныйdefineConfigПосле плагина у вас могут быть подсказки кода при написании файлов конфигурации.

существуетvite, определение псевдонима больше не требует добавления'/'.

//vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

export default defineConfig({
  //定义别名
  alias: {
    "@": path.resolve(__dirname, "src"),
    coms: path.resolve(__dirname, "src/components"),
  },
  css: {},
  plugins: [
    vue(),
  ],
});

Интеграция аксиом

Установить зависимости

//yarn
yarn add  axios  -S    
//npm
npm i axios  -S

существуеткаталог srcСоздать подutilsпапка и вкаталог утилитСоздать подrequest.js

Вы также можете настроить в соответствии с вашими потребностямиaxiosВторичный пакет.

//request.ts
import axios from 'axios';
const baseURL = '';
const service = axios.create({
  baseURL,
  timeout: 5000, // request timeout
});
// 发起请求之前的拦截器
service.interceptors.request.use(
  (config) => {
    // 如果有token 就携带tokon
    const token = window.localStorage.getItem('accessToken');
    if (token) {
      config.headers.common.Authorization = token;
    }
    return config;
  },
  (error) => Promise.reject(error)
);
// 响应拦截器
service.interceptors.response.use(
  (response) => {
    const res = response.data;

    if (response.status !== 200) {
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default service;

использовать

import request from "../utils/request";

request({url: "/profile ",method: "get"})
.then((res)=>{
  console.log(res)
})

Интеграция фиктивных данных

пройти черезyarnилиnpmустановить

//yarn
yarn add mockjs -S   
yarn add vite-plugin-mock -D
yarn add cross-env -D
//npm
npm i mockjs -S   
npm i vite-plugin-mock -D
npm i cross-env -D

После установки необходимо настроитьvite.config.jsЕсли используетсяjsразработки, вам нужно настроитьsupportTsдляfalse. Другие значения по умолчанию в порядке.

еслиts, вам не нужно настраиватьsupportTs.

//导入
import { viteMockServe } from "vite-plugin-mock";
//plugins
 plugins: [vue(), viteMockServe({ supportTs: false })],

Установите переменные среды, здесь, чтобы установить в качестве среды разработки, далее будет рассказано о том, как интегрировать переменные среды.

//package.json	  
  "scripts": {
    "dev": "cross-env NODE_ENV=development vite",
  },

Затем мы создаем тестовый интерфейс для тестирования

существуетКорневая директорияпод новымmockпапка,mockновая папкаusers.js.

//user.js
export default [
  {
    url: "/api/getUsers",
    method: "get",
    response: () => {
      return {
        code: 0,
        message: "ok",
        data: ["tom", "jerry"],
      };
    },
  },
];

Сделать запрос в компоненте

//app.vue
//此处是封装好的axios请求
request({ url: '/api/getUsers', method: 'get' }).then((res) => {
  console.log(res);
});

Интеграция переменных среды

существуетКорневая директорияСоздать под.env.developmentа также.env.productionдокумент.

// .env.development
VITE_APP_ENV = 'development'

// .env.production
VITE_APP_ENV = 'production'

Исправлятьpackage.jsonНастройте переменные среды.

//package.json	  
"scripts": {
  "dev": "cross-env NODE_ENV=development vite",
  "build:dev": "vite build --mode development",
  "build:pro": "vite build --mode production"
},

Интегрировать vue-маршрутизатор

пройти черезyarnилиnpmустановка, так какvue-router4Он не был преобразован в официальную версию, поэтому его необходимо добавить.next.

//yarn
yarn add  vue-router@next -S    
//npm
npm i  vue-router@next -S

каталог srcпод новымrouterпапка

//router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
// hash模式  createWebHashHistory
// history模式  createWebHistory

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      component: () => import("../views/Home.vue"),
    },
  ],
});
    
export default router;

Внести во входной файл

//main.js
import router from "./router";
createApp(App).use(router).mount("#app");

использование в компонентах,vue-routerИспользование и новые функции не являются частью этой статьи.

//App.vue
//在根节点上添加router-view
<template>
  <router-view></router-view>
</template>

Интегрировать vuex

пройти черезyarnилиnpmустановка, так какvuexОн не был преобразован в официальную версию, поэтому его необходимо добавить.next.

//yarn
yarn add vuex@next -S    
//npm
npm i vuex@next  -S

каталог srcпод новымstoreпапка

//store/index.js
import { createStore } from "vuex";
export default createStore({
  state: {
    couter: 109,
  },
});

Внесен в файл ввода.

//main.js
import store from "./store";
createApp(App).use(router).use(store).mount("#app");

Интеграция SASS

пройти черезyarnилиnpmустановить.

//yarn
yarn add sass -D  
//npm
npm i sass -D

каталог srcпод новымstylesпапка,index.scssдля хранения глобальных стилей

//styles/index.scss
a {
  color: red;
}

можно разделить на несколько файлов, вindex.scssСредний импорт

//styles/index.scss
@import './element-ui.scss' //组件库的样式覆盖
@import './variables.scss' //全局变量

интегрировать машинописный текст

Просто выберите при создании проектаvue-tsопция, то леса будут сгенерированыshims-vue.d.tsфайл для поддержкиts

Тогда просто нужноscriptдобавить меткуlang='ts'Только что

<script lang="ts">
    //do something
</script>

Интеграция библиотеки компонентов элементов

Установить первым

//yarn
yarn add  element-plus  -S    
//npm
npm i element-plus  -S

существуеткаталог srcпод новымpluginsпапка,каталог плагиновновыйelementPlus.js документ

Общее введение

//elementPlus.js

import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";

export default function (app) {
  //整体引入
  app.use(ElementPlus);
}

Внедрить по требованию

import { ElButton } from "element-plus";
import { ElInput } from "element-plus";

import "element-plus/lib/theme-chalk/index.css";

export default function (app) {
  //按需引入
  app.use(ElButton);
  app.use(ElInput);
}

Исправлятьmain.js

import ElementPlus from "plugins/elementPlus";

createApp(App).use(ElementPlus).mount("#app");

Адаптация мобильного терминала

Установить зависимости

//yarn
yarn add postcss-pxtorem -D
yarn add autoprefixer -D
//npm
npm install postcss-pxtorem -D
npm install autoprefixer -D

существуетКорневая директорияСоздать подpostcss.config.js

module.exports = {
  "plugins": {
    // 兼容浏览器，添加前缀
    autoprefixer: {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8",
        "last 10 versions", // 所有主流浏览器最近10版本用
      ],
      grid: true,
    },
    "postcss-pxtorem": {
      // Vant 官方根字体大小是 37.5
      rootValue: 37.5, 
      //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
      propList: ['*'],
      // 过滤掉.norem-开头的class，不进行rem转换
      selectorBlackList: ['.norem'],
      unitPrecision: 5, //保留rem小数点多少位
      mediaQuery: false, // 媒体查询( @media screen 之类的)中不生效
      minPixelValue: 12, // px小于12的不会被转换
    }
  }
}

существуеткаталог srcЧжунсинutilпапка,служебный каталогпод новымrem.jsЭквивалентный файл адаптации

// rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = 37.5 
// 注意此值要与 postcss.config.js 文件中的 rootValue保持一致
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 375宽的缩放比例，可根据自己需要修改,一般设计稿都是宽750(图方便可以拿到设计图后改过来)。
  const scale = document.documentElement.clientWidth / 375
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', () => {
  console.log('我执行了');
  setRem();
});

существуетmian.tsвведен в

import "./utils/rem"

Интеграция библиотеки компонентов Vant

Установить зависимости

yarn add vant@next -S
npm i vant@next -S

Уведомление:viteВерсии не требуют загрузки компонентов конфигурации по запросу, посколькуVant 3.0Все внутренние модули основаны наESMНаписано, естественно есть возможность импорта по требованию, но все стили должны быть импортированы.

папка плагиновпод новымvant.js

import Vant from 'vant';
import 'vant/lib/index.css';

export default function (app) {
  app.use(Vant);
}

Исправлятьmain.js

//main.js
import Vant from 'plugins/vant';
createApp(App).use(Vant).mount('#app');

Интеграция плагинов спецификации кода eslint, красивее

Установить зависимости

yarn add babel-eslint -D
yarn add @vue/eslint-config-prettier -D
yarn add eslint -D
yarn add eslint-plugin-prettier -D
yarn add eslint-plugin-vue -D
yarn add prettier -D

Корневая директорияпод новым.eslintrc.js

//.eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-essential', 'eslint:recommended'],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    //在此处写规则
    'no-unused-vars': 0, // 定义未使用的变量
  },
};

Корневая директорияпод новым.prettierrc.json

//.prettierrc.json
{
  //此处填写规则
  "singleQuote": true,//单引号
  "seme": true,//分号
  "tabWidth": 2,//缩进
  "TrailingCooma": "all",//尾部元素有逗号
  "bracketSpacing": true,//对象中的空格
}

рекомбинацияvscodeСохранение автоматически форматируется

 //settings.json
"editor.formatOnSave": true,//保存时格式化
"files.autoSave": "onFocusChange", //失去焦点时保存
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript"
],

Настроить сжатие GZIP

Установить зависимости

yarn add vite-plugin-compression -D

Исправлятьvite.config.js

//vite.config.js

import viteCompression from 'vite-plugin-compression'
plugins:[
  ...
  viteCompression({
      verbose: true,
      disable: false,
      threshold: 10240,
      algorithm: 'gzip',
      ext: '.gz'
  })
]

Выпуск развертывания

Выполните соответствующую команду

"dev": "cross-env NODE_ENV=development vite",
"serve": "vite preview",
"build:dev": "vite build --mode development",
"build:pro": "vite build --mode production"

Создайте новый локальный сервер

Перейти в целевую папку

npm init -y

Установитьvite

yarn add vite -D

Исправлятьpackage.json

  "scripts": {
    "dev": "vite"
  },

Затем начните

npm run dev

Новое в корневом каталогеindex.html

доступhttp://localhost:3000/index.htmlвы можете увидеть страницу

Используйте только TS для создания локальных сервисов

Категории