Я настраиваю Vue в проекте так

Работая сверхурочно и ночами в одиночестве в компании, очень холодно строить код. Я не знаю, когда функция будет завершена, поэтому я убил продукт, чтобы принести его в жертву небу.

В предыдущей статье редактор привел вам многоVueПрактические навыки также были хорошо восприняты всеми. На самом деле, в дополнение к предыдущим навыкам, мы можем сделать больше, чтобы сделать процесс разработки более плавным, опыт разработки лучше и производительность проекта на более высоком уровне.Давайте посмотрим, как это сделать.

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

Практические навыки, Vue тоже умеет так писать2600+ лайков

Абсолютно сухой материал~! Изучите эти советы Vue, вы сможете уйти с работы пораньше и встречаться с богиней1200+ лайков

Впереди высокая энергия, это последняя волна боевых навыков Vue, это бесполезно и потрясающе.1050+ лайков

Научись пользоваться Vue JSX, машина старых крестных твоя650+ лайков

Смотрите заработало! Перечитывая руководство по стилю vue 2.0, я сформулировал эти ключевые правила.150+ лайков

Содержание этой статьи взято из небольшого открытого источника, основанного наvantПакет не предназначен, а внутренняя интеграция этой структуры включает в себя: полный структуру каталогов проекта, мобильный терминал подходит,vantнагрузка по запросу,mock, статическое сжатие ресурсов,axiosВторичная упаковка, инструменты,cdn, спецификация кода,editorconfigи другой контент, его можно загрузить и использовать сразу, без какой-либо базовой настройки, вы можете использовать его, адрес складаGitHub.com/snow Zijun/V…, если вам это нравится, пожалуйста, дайте мне одинstar, Xiaobian будет продолжать обновлять.

Включите сжатие, чтобы страницы загружались быстрее

Когда мы разрабатываем, чтобы облегчить отладку, нам нужно использовать исходный код для отладки, но в производственной среде мы стремимся к более быстрой загрузке и лучшему опыту, В это время мы удалим пробелы в коде. и обработайте сжатие обфускации, просто чтобы сделатьjs,cssФайлы становятся меньше и загружаются быстрее. Но просто сделать это недостаточно, мы можем сделать еще больше.

gzipдаWebНаиболее широко используемым алгоритмом сжатия файлов в мире, большинство серверов (например, nginx) и клиентов (например, Chrome), мы используем в настоящее время поддерживают этот алгоритм, поэтому, если мы упаковываемVueПроект, вы можете напрямую сжать все статические ресурсы вgzip, вы можете значительно уменьшить размер статических ресурсов и повысить скорость загрузки браузера, тогдаVueКак настроен проект?

Добавить кvue.config.jsдокумент

в новомVueВ проекте по умолчанию нетvue.config.jsФайл, сначала необходимо создать новый файл vue.config.js в корневом каталоге проекта, а затем добавить следующий код в файл

module.exports = {

}

Эта статья будет использована несколько разvue.config.jsфайл, который не будет повторяться в дальнейшем.

настроитьcompression-webpack-plugin

• Установитьcompression-webpack-plugin

  yarn add compression-webpack-plugin -D
  

• настроить

  Исправлятьvue.config.jsФайл представляет собой следующий код

  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  const isProd = process.env.NODE_ENV === 'production'
  module.exports = {
    configureWebpack: config => {
      if (isProd) {
        // 配置webpack 压缩
        config.plugins.push(
          new CompressionWebpackPlugin({
            test: /\.js$|\.html$|\.css$/,
            // 超过4kb压缩
            threshold: 4096
          })
        )
      }
    }
  }
  

• Просмотр эффектов сжатия

  После настройки сжатия выше выполнитеyarn buildкоманда, вы обнаружите, что суффикс добавляется к сгенерированному статическому файлу.gzдокумент

  

  При развертывании проекта на уже включенномgzipНапример, серверыnginxВнутри зайдите в браузер, чтобы увидеть, что браузер загружает сжатый файл.

  

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

В настоящее время существует два популярных метода адаптации для мобильных терминалов.pxПеревести вrem, другой долженpxПеревести вvw, при разработке проекта я вообще люблюpxПеревести вvw, то как настроить

Установитьpostcss-px-to-viewport

Во-первых, вам нужно установить проектpostcss-px-to-viewportплагин

yarn add postcss-px-to-viewport -D

Настроить мобильную адаптацию

Создайте новый файл в корневом каталоге проектаpostcss.config.js, а затем добавьте следующий код в файл

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-px-to-viewport': {
      // 视窗的宽度，对应的是我们设计稿的宽度，我们公司用的是375
      viewportWidth: 375,
      // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      // viewportHeight: 1334,
      // 指定`px`转换为视窗单位值的小数位数
      unitPrecision: 3,
      // 指定需要转换成的视窗单位，建议使用vw
      viewportUnit: 'vw',
      // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      selectorBlackList: ['.ignore'],
      // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      minPixelValue: 1,
      // 允许在媒体查询中转换`px`
      mediaQuery: false
    }
  }
}

После настройки перезапускаем сервис, проверяем элемент в браузере, и можно посмотреть, что было написано изначальноpxпревращаются вvw

Невозможно выполнить отладку на мобильных устройствах, вам нужна vConsole

Иногда мобильные проекты, которые мы разрабатываем, находятся вPCОтображение браузера на терминале нормальное, но когда дело доходит до мобильного телефона, возникает проблема, которая сильно запутывает людей и может меняться только вслепую, как я могу просмотреть это на мобильном телефонеlog, для просмотра интерфейсных запросов и т.п. нужно использоватьvConsole

УстановитьvConsole

vConsoleЭто плагин, разработанный Tencent для отладки мобильных проектов.vConsoleПросто выполните следующую команду

yarn add vConsole -S

использовать в проекте

В основномvConsoleОн используется только в среде разработки и не будет использоваться в формальной среде, поэтому нам нужно использовать его только в среде разработки.Как его использовать?

Открытьmain.js, а затем добавьте в него следующий код

// 开发环境下面使用vConsole进行调试
if (process.env.NODE_ENV === 'development') {
  const VConsole = require('vconsole')
  new VConsole()
}

Затем запустите проект, вы увидите, что в правом нижнем углу системы появится красная кнопка, щелкните ее, чтобы увидеть ряд содержимого, необходимого для отладки.

игнорировать каталоги, пустьmomentстать меньше

использовалmomentстуденты должны знать,momentизlocaleЯзыковой пакет очень большой, но наши общие проекты используются только в Китае, а мы не используем столько языков, можем ли мы его удалить? На этом этапе вам нужно использоватьwebpack.IgnorePlugin.

существуетvue.config.jsфайл, вам нужно добавить следующий код

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
    // 优化moment 去掉国际化内容
    config
    .plugin('ignore')
    // 忽略/moment/locale下的所有文件
    .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)) 
  }
}

Хотя мы игнорируем файловую директорию, содержащую путь к полю «./locale/», в соответствии с описанным выше методом, это также делает невозможным отображение китайского языка при его использовании.Что нам делать, если мы хотим использовать определенный язык ?

import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
// 指定使用的语言
moment.locale('zh-cn');

Разумеется, редактор рекомендует использовать в проекте более легкий вес.day.jsзаменятьmoment

Производственная среда удалитьconsole.log

Окружающая среда разработки добавит многоconsole.log,но еслиconsole.logОтправка его в производственную среду не только повлияет на производительность выполнения кода, но также может привести к утечке некоторых основных данных, поэтому мы предпочитаем размещать всеconsole.logОчистить, как это сделать?

Установить плагин

необходимо установитьbabel-plugin-transform-remove-consoleплагин

yarn add babel-plugin-transform-remove-console -D

настроитьbabel.config.js

Открытьbabel.config.jsфайл, затем добавьте в файл

// 所有生产环境
const prodPlugin = []

if (process.env.NODE_ENV === 'production') {
  
// 如果是生产环境，则自动清理掉打印的日志，但保留error 与 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      // 保留 console.error 与 console.warn
      exclude: ['error', 'warn']
    }
  ])
}

module.exports = {
   plugins: [
     ...prodPlugin
   ]
}

включиeslint,stylelint

Увидев эту статью, некоторые студенты не выдерживают и хотят бросить, неужели неудобно настраивать это под себя? В командной разработке настройка таких еще очень полезна, она ограничивает всех в команде в разработке функций по стандарту, так что хотя бы код, написанный всеми, не будет непонятен друг другу (мучаюсь с нестандартным кодом).

Полный адрес складаGitHub.com/snow Zijun/V…

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

настройка этихlintПрежде чем вам нужно установить эти плагины

• @vue/cli-plugin-eslint
• @vue/eslint-config-prettier
• babel-eslint
• eslint
• eslint-plugin-babel
• eslint-plugin-prettier
• eslint-plugin-vue
• husky
• lint-staged
• prettier
• stylelint
• stylelint-config-recess-order
• stylelint-config-standard
• stylelint-prettier
• stylelint-scss

Также нужно датьvscodeСледующие плагины

• eslint
• stylelint
• Prettier - Code formatter

настроитьvscode

существуетvscodeизsettingДобавьте следующий код в файл

"eslint.enable":true,
"eslint.options": {
  "extensions":[
    ".js",
    ".vue",
    ".ts",
    ".tsx"
  ]
 },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "css.validate": true,
  "scss.validate": true,
  "less.validate": true,
  "editor.codeActionsOnSave": {
     "source.fixAll": true
  },

настроитьeslint

Сначала добавьте в корневой каталог проекта.eslintrc.jsа также.eslintignoreдокумент

существует.eslintrc.jsДобавьте в файл следующее

// 缩略版
module.exports = {
  root: true,
  globals: {
    process: true
  },
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ['plugin:vue/recommended', 'eslint:recommended'],
  plugins: ['babel', 'prettier'],
  rules:{ 
    // 校验规则此处略
 }
}

существует.eslintignoreДобавьте следующий код в файл

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

После настройки вpackage.jsonизscriptдобавить внутрь

"eslint": "vue-cli-service lint"

затем выполнитьyarn eslintВы можете отформатировать код, конечноvscodeЭто также будет проверено один раз при сохранении файла.

Настройка стиля

ограничениеjsа такжеvueнедостаточно, также необходимо ограничить следующиеstyle, я чувствую, что это моя собственная инициатива, чтобы выкопать яму для себя, но эта вещь становится лучше, чем больше вы ее используете, давайте посмотрим

Сначала создайте новый проект в корневом каталоге проекта..stylelintrc.jsа также.stylelintignoreдокумент

существует.stylelintrc.jsДобавьте в файл следующее

module.exports = {
  extends: ["stylelint-config-standard","stylelint-config-recess-order"],
  "plugins": [
    "stylelint-scss"
  ],
  rules: {
    // 校验规则略
  }
}

.stylelintignoreсодержимое файла с.eslintignoreСодержимое файла соответствует

После настройки вpackage.jsonизscriptдобавить внутрь

"stylelint": "stylelint src/**/*.{html,vue,css,sass,scss} --fix",

затем выполнитьyarn stylelintВы можете отформатировать стиль, конечноvscodeЭто также будет проверено один раз при сохранении файла.

настроитьhusky

существуетeslint,stylelintПосле настройки, при написании кодаvscodeОн будет автоматически проверять отформатированный код, но я боюсь, что кто-то будет использовать другие редакторы без настройки плагинов и отправит непроверенный код на склад, что приведет к тому, что код каждого станет популярным.В это время вам нужно использоватьhuskyПроверяйте при отправке кода.

существуетgitПри отправке кода рядhookфункция ловушки, в то время какhuskyтолько одинGit hooksинструмент.lint-stagedЭто инструмент, который запускает линтеры для временных файлов git.Зачем использовать этот инструмент, потому что, когда мы отправляем код, нам нужно проверять только измененные файлы, иначе проверка всех файлов будет пустой тратой времени. Так как же изменить конфигурацию?

тебе просто нужноpackage.jsonДобавьте следующий код в файл

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add -A"
    ],
    "*.{html,vue,css,sass,scss}": [
      "yarn stylelint"
    ]
  }

В это время, если вы выполнитеgit commit -m '提交描述'Время, вы найдете звонки до подачиeslintа такжеstylelintВыполняется проверка кода, но проверка завершается неудачей и не может быть отправлена

Адрес склада

Весь код в этой статье выложен на github, адрес складаGitHub.com/snow Zijun/V…, этот проект использовался в нескольких командах, вам предлагается использовать его вместе

Эпилог

Не истощайте свое вдохновение и воображение, не будьте рабом своих моделей. - Винсент Ван Гог

В этой статье используетсяmdniceнабор текста