Готовое решение для мобильной платформы vue-cli4 vant rem

Vue.js

возобновить

√ 23.08.2020 Добавлена ​​адаптация vw
√ 21.04.2020 Оптимизируйте документы, оптимизируйте проекты
√ 05.02.2020 Обновите vue-cli4, добавьте Eslint+Pettier, добавьте компоненты vant и импортируйте по запросу по всему миру

описывать

На основе vue-cli4.0+ webpack 4 + vant ui + решение для адаптации sass+ rem + пакет axios, создание каркаса шаблона мобильного телефона

адрес проекта:github

Требования к версии узла

Vue CLIТребуется Node.js 8.9 или выше (рекомендуется 8.11.0+). вы можете использоватьnvmилиnvm-windowsУправление несколькими версиями Node на одном компьютере.

Этот пример Node.js 12.14.1

Стартовый проект

git clone https://github.com/sunniejs/vue-h5-template.git

cd vue-h5-template

npm install

npm run serve

содержание

Мультисредовая разработка

package.jsonвнутреннийscriptsнастроитьserve stage build,пройти через--mode xxxвыполнять в различных средах

  • пройти черезnpm run serveзапустить локально, выполнитьdevelopment
  • пройти черезnpm run stageпакетный тест, выполнитьstaging
  • пройти черезnpm run buildОфициально упаковано, выполненоproduction 
"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}
Введение в конфигурацию

кVUE_APP_Переменные в начале кода можно передавать в кодprocess.env.VUE_APP_доступ.
Например,VUE_APP_ENV = 'development'пройти черезprocess.env.VUE_APP_ENVдоступ.
КромеVUE_APP_*В дополнение к переменным есть две специальные переменные, которые всегда доступны в коде вашего приложения.NODE_ENVа такжеBASE_URL

Создайте новый проект в корневом каталоге проекта.env.*

  • .env.development конфигурация локальной среды разработки
NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'
  • .env.staging конфигурация тестовой среды
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'
  • .env.production официальная конфигурация среды
 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

Здесь мы не определяем много переменных, только базовую VUE_APP_ENV.development staging production
переменные, которые мы объединяем вsrc/config/env.*.jsуправление в.

Есть проблема, так как три соответствующих файла имеют здесь зависимости от файла настроек переменных среды, зачем идти под новый конфиг?

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

config/index.js

// 根据环境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

Настройте переменные, соответствующие среде, и возьмите локальный файл среды.env.development.jsНапример, пользователи могут изменять в соответствии со своими потребностями.

// 本地环境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 项目地址
  baseApi: 'https://test.xxx.com/api', // 本地api请求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

В зависимости от окружения переменные будут разными

// 根据环境不同引入不同baseApi地址
import {baseApi} from '@/config'
console.log(baseApi)

rem адаптационное решение

Многие друзья будут спрашивать меня об адаптации.Поскольку мы используем Vant UI, мы должны следовать спецификациям дизайна Vant UI 375. Как правило, наш дизайн показывает диаграмму пользовательского интерфейса на
Пройдите к Голубому озеру, и мы сможем получить нужный нам размер. Теперь займемся популяризацией rem.

Стили в Ванте используются по умолчаниюpxкак единое целое, при необходимости используйтеremединиц, рекомендуются следующие два инструмента:

  • postcss-pxtoremэтоpostcssПлагин для преобразования единиц вrem
  • lib-flexibleдля установкиremИсходная величина
Конфигурация PostCSS

Ниже приведены основныеpostcssКонфигурация, которая может быть изменена на основе этой конфигурации в соответствии с требованиями проекта

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

Подробнее:vant

Обязательно к посещению для новичков, пропустите для ветеранов

Многие друзья будут спрашивать меня об адаптации.

мы знаем1remравныйhtmlустанавливается корневым элементомfont-sizeизpxстоимость. Настройки пользовательского интерфейса ВантаrootValue: 37.5, можно посмотреть под айфон 6 см.(1rem 等于 37.5px):

<html data-dpr="1" style="font-size: 37.5px;"></html>

Переключение разных моделей, корневой элемент может быть другимfont-size. Когда вы пишете стиль css px, он будет преобразован программой вremдостичь пригодности.

Поскольку мы используем компоненты Vant, нам необходимо следоватьrootValue: 37.5писать стили.

Например: дизайн дает вам изображение размером 750 пикселей * 1334 пикселей, которое закрывает экран на iPhone6 ​​и адаптируется к другим моделям.

  • когдаrootValue: 70, стильwidth: 750px;height: 1334px;Картинка заполнит экран iPhone 6. В это время, если вы переключитесь на другие модели, картинка тоже заполнится.
  • когдаrootValue: 37.5когда стильwidth: 375px;height: 667px;Картинка заполнит экран iPhone 6.

То есть писать CSS шириной 375px под iPhone 6. Другие, вы можете написать соответствующий стиль в соответствии с вашим дизайнерским рисунком.

Конечно, вы можете использовать 100% для заполнения экрана, это просто пример.

<img class="image" src="https://imgs.solui.cn/weapp/logo.png" />

<style>
  /* rootValue: 75 */
  .image {
    width: 750px;
    height: 1334px;
  }
  /* rootValue: 37.5 */
  .image {
    width: 375px;
    height: 667px;
  }
</style>

схема адаптации вм

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

1. Установите зависимости

npm install postcss-px-to-viewport -D

2. Измените .postcssrc.js

Измените файл .postcssrc.js в корневом каталоге следующим образом.

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-px-to-viewport': {
      viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
      unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
      selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false // 允许在媒体查询中转换`px`
    }
  }
}

3. Удалите исходный код, связанный с rem.

src/main.js удалите следующий код

// 移动端适配
import 'lib-flexible/flexible.js'

package.json удалите следующий код

"lib-flexible": "^0.3.2",
"postcss-pxtorem": "^5.1.1",

При работе элемент F12 css является единицей измерения vw.

Компоненты VantUI загружаются по запросу

Проект принимаетVant автоматически импортирует компоненты по запросу (рекомендуется)Ниже приведено введение в установку плагина:

babel-plugin-importэтоbabelплагин, который будетimportСпособ написания автоматически преобразуется в способ импорта по запросу

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

npm i babel-plugin-import -D

существуетbabel.config.jsнастраивать

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]
module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
  plugins
}

Но его все равно приходится вводить каждый раз при использовании страницы, что очень хлопотно.src/plugins/vant.jsВ рамках единого компонента управления, который необходимо импортировать, нет необходимости повторять введение, так что его можно использовать прямо на странице, что удобно ~

// 按需全局引入 vant组件
import Vue from 'vue'
import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)

Глобальный стиль SASS

Сначала вы можете столкнутьсяnode-sassЕсли установка не удалась, не сдавайтесь и попробуйте несколько раз! ! !

Соответствующий стиль каждой страницы записывается в отдельный файл .vue.scopedОн добавляет концепцию домена в CSS, как следует из его названия.

<style lang="scss">
    /* global styles */
</style>

<style lang="scss" scoped>
    /* local styles */
</style>

Структура каталогов

vue-h5-template все глобальные стили находятся в@/src/assets/cssнастройки каталога

├── assets
│   ├── css
│   │   ├── index.scss               # 全局通用样式
│   │   ├── mixin.scss               # 全局mixin
│   │   └── variables.scss           # 全局变量

Пользовательские стили пользовательского интерфейса

Теперь поговорим о том, как переписатьvant-uiстиль. из-заvant-uiМы вводим стиль глобально, поэтому, если вы хотите переопределить его стиль на определенной странице, вы не можете добавитьscoped, но вы хотите переопределить только эту страницуvantстиль, вы можете добавитьclass, используйте пространства имен для решения проблемы.

.about-container {
    /* 你的命名空间 */
    .van-button {
        /* vant-ui 元素*/
        margin-right: 0px;
    }
}

Родительский компонент изменяет стиль дочернего компонента Глубокий селектор

когда ваш дочерний компонент используетscopedНо если вы хотите изменить стиль дочернего компонента в родительском компоненте, вы можете передать>>>реализовать:

<style scoped>
.a >>> .b { /* ... */ }
</style>

глобальная переменная

vue.config.jsНастроить с помощьюcss.loaderOptionsвариант, впрыскsassизmixin variablesВ глобальном, не нужно вручную импортировать, настраивать$cdnВведите адрес cdn в качестве переменной, тем самым передав общую глобальную переменную всем стилям Sass/Less:

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const defaultSettings = require('./src/config/index.js')
module.exports = {
    css: {
        extract: IS_PROD,
        sourceMap: false,
        loaderOptions: {
            // 给 scss-loader 传递选项
            scss: {
                // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置图片cdn
                // 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
                prependData: `
                @import "assets/css/mixin.scss";
                @import "assets/css/variables.scss";
                $cdn: "${defaultSettings.$cdn}";
                 `,
            },
        },
    },
}

Доступно в настройках js$cdn,.vueиспользуется в файлеthis.$cdnдоступ

// 引入全局样式
import '@/assets/css/index.scss'

// 设置 js中可以访问 $cdn
// 引入cdn
import { $cdn } from '@/config'
Vue.prototype.$cdn = $cdn

Использование в css и js

<script>
    console.log(this.$cdn)
</script>
<style lang="scss" scoped>
    .logo {
        width: 120px;
        height: 120px;
        background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
    }
</style>
[](https://sunniejs.github.io/vue-h5-template/#/zh-cn/vant)

Управление состоянием Vuex

Структура каталогов

├── store
│   ├── modules
│   │   └── app.js
│   ├── index.js
│   ├── getters.js

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

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

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

<script>
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['userName'])
    },

    methods: {
      // Action 通过 store.dispatch 方法触发
      doDispatch() {
        this.$store.dispatch('setUserName', '真乖，赶紧关注公众号，组织都在等你~')
      }
    }
  }
</script>

Vue-router

Этот случай принимаетhashРежим, разработчик может изменить его в соответствии с потребностямиmode base

Уведомление: если вы использовалиhistoryмодель,vue.config.jsсерединаpublicPathсделать соответствующееИсправлять

Перейти к: базовой конфигурации vue.config.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export const router = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/home/index'), // 路由懒加载
    meta: {
      title: '首页', // 页面标题
      keepAlive: false // keep-alive 标识
    }
  }
]
const createRouter = () =>
  new Router({
    // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
    // base: '/app/',
    scrollBehavior: () => ({y: 0}),
    routes: router
  })

export default createRouter()

Более:Vue Router

Упаковка Axios и управление интерфейсом

utils/request.jsЧтобы инкапсулировать аксиомы, разработчикам необходимо модифицировать их в соответствии с фоновым интерфейсом.

  • service.interceptors.request.useВы можете установить заголовки запроса, такие как установкаtoken
  • config.hideloadingЗадается в параметрах интерфейса под папкой api, о которой речь пойдет ниже
  • service.interceptors.response.useВы можете вернуть обработку данных в интерфейс, например, 401 удалить локальную информацию, войти снова

Управление интерфейсом

существуетsrc/apiЕдиный интерфейс управления в папке

  • Вы можете создать несколько интерфейсов стыковки модулей, напримерhome.jsИнтерфейс домашней страницы объясняется здесьuser.js
  • urlАдрес интерфейса, который будет склеен при запросеconfigвнизbaseApi
  • methodметод запроса
  • dataпараметры запросаqs.stringify(params)это операция сериализации данных
  • hideloadingПо умолчаниюfalse,Установить какtrueПосле этого некоторые интерфейсы при загрузке пользовательского интерфейса не должны восприниматься пользователем.
import qs from 'qs'
// axios
import request from '@/utils/request'
//user api

// 用户信息
export function getUserInfo(params) {
  return request({
    url: '/user/userinfo',
    method: 'post',
    data: qs.stringify(params),
    hideloading: true // 隐藏 loading 组件
  })
}

Как позвонить

// 请求接口
import {getUserInfo} from '@/api/user.js'

const params = {user: 'sunnie'}
getUserInfo(params)
  .then(() => {})
  .catch(() => {})

Базовая конфигурация Webpack 4 vue.config.js

если вашVue Routerрежим хэш

publicPath: './',

если вашVue RouterШаблон - это история publicPath здесь и вашVue Router base Продолжай

publicPath: '/app/',

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  publicPath: './', // 署应用包时的基本 URL。 vue-router hash 模式使用
  //  publicPath: '/app/', // 署应用包时的基本 URL。  vue-router history模式使用
  outputDir: 'dist', //  生产环境构建文件的目录
  assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false,
  productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  devServer: {
    port: 9020, // 端口号
    open: false, // 启动后打开浏览器
    overlay: {
      //  当出现编译器错误或警告时，在浏览器中显示全屏覆盖层
      warnings: false,
      errors: true
    }
    // ...
  }
}

Настроить псевдоним псевдоним

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

Настроить междоменный прокси

Если для вашего проекта требуются междоменные настройки, вам нужно позвонитьvue.config.js proxyПрокомментируйте и настройте соответствующие параметры

Уведомление: вам также нужно поставитьsrc/config/env.development.jsвнутреннийbaseApiустановлен в '/'

module.exports = {
  devServer: {
    // ....
    proxy: {
      //配置跨域
      '/api': {
        target: 'https://test.xxx.com', // 接口的域名
        // ws: true, // 是否启用websockets
        changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

Используйте, например:src/api/home.js

export function getUserInfo(params) {
  return request({
    url: '/api/userinfo',
    method: 'get',
    data: qs.stringify(params)
  })
}

Настройка анализа упаковки

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  chainWebpack: config => {
    // 打包分析
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
  }
}

npm run build

Настройте внешние ресурсы для импорта ресурсов cdn

Эта версия CDN больше не представлена. Я тестировал с использованием CDN и без него. Неиспользование займет меньше времени, чем его использование. Многие статьи в Интернете тестируют скорость CDN, и этот разработчик действительно может ее протестировать.

Кроме того, общедоступный CDN, используемый в проекте, нестабилен, и разрешение доменного имени также требует времени (если вы хотите его использовать, попробуйте использовать то же доменное имя).

потому что каждый раз, когда страница встречает<script>теги прекратят синтаксический анализ и выполнение, поэтому его следует максимально сократить.<script>количество этикетокHTTPВ запросе есть определенные накладные расходы, файлы 100К загружаются быстрее, чем 5 файлов по 20К, поэтому необходимо иметь меньше скриптов

На данный момент нет исследований по размещению его на моем собственном сервере cdn, и я продолжу его оптимизировать позже ~

const defaultSettings = require('./src/config/index.js')
const name = defaultSettings.title || 'vue mobile template'
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

// externals
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios'
}
// CDN外链，会插入到index.html中
const cdn = {
  // 开发环境
  dev: {
    css: [],
    js: []
  },
  // 生产环境
  build: {
    css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
    ]
  }
}
module.exports = {
  configureWebpack: config => {
    config.name = name
    // 为生产环境修改配置...
    if (IS_PROD) {
      // externals
      config.externals = externals
    }
  },
  chainWebpack: config => {
    /**
     * 添加CDN参数到htmlWebpackPlugin配置中
     */
    config.plugin('html').tap(args => {
      if (IS_PROD) {
        args[0].cdn = cdn.build
      } else {
        args[0].cdn = cdn.dev
      }
      return args
    })
  }
}

Добавить в Public / index.html

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
     <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

удалить console.log

Тестовая среда и локальная среда сохраняютсяconsole.log

npm i -D babel-plugin-transform-remove-console

Настроить в babel.config.js

// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]
// 去除 console.log
if (IS_PROD) {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
  plugins
}

splitChunks упаковывает сторонние модули отдельно

module.exports = {
  chainWebpack: config => {
    config.when(IS_PROD, config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // 将 runtime 作为内联引入不单独存在
            inline: /runtime\..*\.js$/
          }
        ])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          // cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3, //  被至少用三次以上打包分离
            priority: 5, // 优先级
            reuseExistingChunk: true // 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。
          },
          node_vendors: {
            name: 'chunk-libs',
            chunks: 'initial', // 只打包初始时依赖的第三方
            test: /[\\/]node_modules[\\/]/,
            priority: 10
          },
          vantUI: {
            name: 'chunk-vantUI', // 单独将 vantUI 拆包
            priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
            test: /[\\/]node_modules[\\/]_?vant(.*)/
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
  }
}

Добавьте совместимость с IE.

Предыдущий способ сообщит@babel/polyfill is deprecated. Please, use required parts of core-js and regenerator-runtime/runtime separately

@babel/polyfillвыбросить, использоватьcore-jsа такжеregenerator-runtime

npm i --save core-js regenerator-runtime

существуетmain.jsдобавлено в

// 兼容 IE
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
import 'core-js/stable'
import 'regenerator-runtime/runtime'

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

const plugins = []

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
  plugins
}

Единая спецификация разработки Eslint+Petier

Установка VScode (версия 1.47.3)eslint prettier veturплагин.vueФайлы форматируются с помощью vetur, другие используютprettier, я напишу о том, как использовать эти три вещи вместе позже

в файле.prettierrcНапишите свои мелкие правила

{
   "printWidth": 120,
   "tabWidth": 2,
   "singleQuote": true,
   "trailingComma": "none",
   "semi": false,
   "wrap_line_length": 120,
   "wrap_attributes": "auto",
   "proseWrap": "always",
   "arrowParens": "avoid",
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
   "useTabs": false,
   "overrides": [{
       "files": ".prettierrc",
       "options": {
           "parser": "json"
       }
   }]
}

Настройки Vscode.json

    {
  // 将设置放入此文件中以覆盖默认设置
  "files.autoSave": "off",
  // 控制字体系列。
  "editor.fontFamily": "Consolas, 'Courier New', monospace,'宋体'",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  // 以像素为单位控制字号。
  "editor.fontSize": 16,
  // 控制选取范围是否有圆角
  "editor.roundedSelection": false,
  // 建议小组件的字号
  "editor.suggestFontSize": 16,
  // 在“打开的编辑器”窗格中显示的编辑器数量。将其设置为 0 可隐藏窗格。
  "explorer.openEditors.visible": 0,
  // 是否已启用自动刷新
  "git.autorefresh": true,
  // 以像素为单位控制终端的字号，这是 editor.fontSize 的默认值。
  "terminal.integrated.fontSize": 14,
  // 控制终端游标是否闪烁。
  "terminal.integrated.cursorBlinking": true,
  // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。
  // Tab Size
  "editor.tabSize": 2,
  // By default, common template. Do not modify it!!!!!
  "editor.formatOnType": true,
  "window.zoomLevel": 0,
  "editor.detectIndentation": false,
  "css.fileExtensions": ["css", "scss"],
  "files.associations": {
    "*.string": "html",
    "*.vue": "vue",
    "*.wxss": "css",
    "*.wxml": "wxml",
    "*.wxs": "javascript",
    "*.cjson": "jsonc",
    "*.js": "javascript"
  },
  // 为指定的语法定义配置文件或使用带有特定规则的配置文件。
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true
  },
  //保存时eslint自动修复错误
  "editor.formatOnSave": true,
  // Enable per-language
  //配置 ESLint 检查的文件类型
  "editor.quickSuggestions": {
    "strings": true
  },
  // 添加 vue 支持
  // 这里是针对vue文件的格式化设置，vue的规则在这里生效
  "vetur.format.options.tabSize": 2,
  "vetur.format.options.useTabs": false,
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.sass": "sass-formatter",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
      "wrap_attributes": "aligned-multiple", // 超过150折行
      "wrap-line-length": 150
    },
    // #vue组件中html代码格式化样式
    "prettier": {
      "printWidth": 120,
      "tabWidth": 2,
      "singleQuote": false,
      "trailingComma": "none",
      "semi": false,
      "wrap_line_length": 120,
      "wrap_attributes": "aligned-multiple", // 超过150折行
      "proseWrap": "always",
      "arrowParens": "avoid",
      "bracketSpacing": true,
      "jsxBracketSameLine": true,
      "useTabs": false,
      "overrides": [
        {
          "files": ".prettierrc",
          "options": {
            "parser": "json"
          }
        }
      ]
    }
  },
  // Enable per-language
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "vetur.validation.template": false,
  "html.format.enable": false,
  "json.format.enable": false,
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 开启eslint自动修复js/ts功能
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "minapp-vscode.disableAutoConfig": true,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "editor.maxTokenizationLineLength": 200000
}

Суммировать

Адрес проекта на гитхабе

обо мне

Для получения дополнительных статей по технической тематике обратите внимание на общедоступный аккаунт «Front-end Girls' School» и присоединитесь к «Fairy Group Front-end».

Если это вам поможет, пришлите мне звездочку (づ￣3￣)づ╭❤～

Пожалуйста, свяжитесь с автором для перепечатки!

Категории