開箱即用 vue-cli4 vant rem 移動端框架方案

時間  2021-08-12
標籤 javascript css html 前端 vue java node react webpack ios 欄目 無線 简体版
原文   原文鏈接

更新

√ 2020-08-23 新增vw適配
√ 2020-04-21 優化文檔，優化項目
√ 2020-02-05 升級vue-cli4，添加Eslint+Pettier，添加vant 組件全局按需引入

描述

基於vue-cli4.0+ webpack 4 + vant ui + sass+ rem適配方案+axios封裝，構建手機端模板腳手架 javascript

項目地址：githubcss

Node 版本要求

Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。html

本示例 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 來執行不一樣環境vue

  • 經過 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_URLjava

在項目根目錄中新建.env.*node

  • .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 裏進行管理。react

這裏有個問題，既然這裏有了根據不一樣環境設置變量的文件，爲何還要去 config 下新建三個對應的文件呢？webpack

修改起來方便，不需 要重啓項目，符合開發習慣。ios

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 的設計規範走，通常咱們的設計會將 UI 圖上
傳到藍湖，咱們就能夠須要的尺寸了。下面就大搞普及一下 rem。

Vant 中的樣式默認使用px做爲單位，若是須要使用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 值。Vant UI 設置 rootValue: 37.5,你能夠看到在 iPhone 6 下 看到 （1rem 等於 37.5px）：

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

切換不一樣的機型，根元素可能會有不一樣的font-size。當你寫 css px 樣式時，會被程序換算成 rem 達到適配。

由於咱們用了 Vant 的組件，須要按照 rootValue: 37.5 來寫樣式。

舉個例子：設計給了你一張 750px * 1334px 圖片，在 iPhone6 上鋪滿屏幕,其餘機型適配。

  • 當rootValue: 70 , 樣式 width: 750px;height: 1334px; 圖片會撐滿 iPhone6 屏幕，這個時候切換其餘機型，圖片也會跟着撐 滿。
  • 當rootValue: 37.5 的時候，樣式 width: 375px;height: 667px; 圖片會撐滿 iPhone6 屏幕。

也就是 iphone 6 下 375px 寬度寫 CSS。其餘的你就能夠根據你設計圖，去寫對應的樣式就能夠了。

固然，想要撐滿屏幕你可使用 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>
複製代碼

vm 適配方案

本項目使用的是 rem 的 適配方案，其實不管你使用哪一種方案，都不須要你去計算 12px 是多少 rem 或者 vw, 會有專門的工具去幫你作 。若是你想用 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 樣式。因爲 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 封裝 axios ,開發者須要根據後臺接口作修改。

  • 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 後，不顯示 loading ui 交互中有些接口不須要讓用戶感知
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 模式是 hash

publicPath: './',
複製代碼

若是你的 Vue Router 模式是 history 這裏的 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
    }
    // ...
  }
}
複製代碼

配置 alias 別名

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'))
  }
}
複製代碼

配置 proxy 跨域

若是你的項目須要跨域設置，你須要打來 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
複製代碼

配置 externals 引入 cdn 資源

這個版本 CDN 再也不引入，我測試了一下使用引入 CDN 和不使用,不使用會比使用時間少。網上很多文章測試 CDN 速度快，這個開發者可 以實際測試一下。

另外項目中使用的是公共 CDN 不穩定，域名解析也是須要時間的（若是你要使用請儘可能使用同一個域名）

由於頁面每次遇到<script>標籤都會停下來解析執行，因此應該儘量減小<script>標籤的數量 HTTP請求存在必定的開銷，100K 的文件比 5 個 20K 的文件下載的更快，因此較少腳本數量也是頗有必要的

暫時尚未研究放到本身的 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+Pettier 統一開發規範

VScode （版本 1.47.3）安裝 eslint prettier vetur 插件 .vue 文件使用 vetur 進行格式化，其餘使用prettier,後面會 專門寫個如何使用配合使用這三個玩意

在文件 .prettierrc 裏寫 屬於你的 pettier 規則

{
   "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 setting.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
}
複製代碼

總結

項目github地址

關於我

獲取更多技術相關文章，關注公衆號」前端女塾「，加入」前端仙女羣「。

若是對你有幫助送我一顆小星星（づ￣3￣）づ╭❤～

轉載請聯繫做者！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程