基于Vue3+TypeScript+ Vue-Cli4.0構(gòu)建手機(jī)端模板腳手架

vue3-h5-template

基于 Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 適配方案+axios 封裝 + jssdk 配置 + vconsole 移動(dòng)端調(diào)試姻几，構(gòu)建手機(jī)端模板腳手架

項(xiàng)目地址：github

查看 demo 建議手機(jī)端查看

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)予颤。你可以使用 nvm 或 nvm-windows 在同一臺(tái)電腦中管理多個(gè) Node 版本寝蹈。

本示例 Node.js 12.14.0

項(xiàng)目結(jié)構(gòu)

vue-h5-template -- UI 主目錄  
├── public -- 靜態(tài)資源  
├ ├── favicon.ico -- 圖標(biāo)  
├ └── index.html -- 首頁  
├── src -- 源碼目錄  
├ ├── api -- 后端交互的接口  
├ ├── assets -- 靜態(tài)資源目錄
├ ├ ├── css
├ ├ ├── index.scss -- 全局通用樣式
├ ├ ├── mixin.scss -- 全局 mixin
├ ├ └── variables.scss -- 全局變量  
├ ├── components -- 封裝的組件  
├ ├── config -- 環(huán)境配置  
├ ├── hooks -- vue3 Hooks
├ ├── model -- 類型聲明文件
├ ├── const -- 放 vue 頁面的配置常量  
├ ├── plugins -- 插件  
├ ├── route -- VUE 路由  
├ ├ ├── index -- 路由入口  
├ ├ └── router.config.js -- 路由表  
├ ├── store -- VUEX  
├ ├── utils -- 工具包  
├ ├ ├── request.js -- axios 封裝
├ ├ └── storage.js -- 本地存儲(chǔ)封裝
├ ├── views -- 業(yè)務(wù)上的 vue 頁面  
├ ├ ├── layouts -- 路由布局頁面(是否緩存頁面)
├ ├ ├── tabBar -- 底部菜單頁面
├ ├ └── orther -- 其他頁面
├ ├── App.vue -- 根組件  
├ ├── main.ts -- 入口 ts  
├ ├── shims-axios.d.ts -- axios 聲明文件  
├ └── shims-vue.d.ts -- vue 組件聲明文件
├── .env.development -- 開發(fā)環(huán)境  
├── .env.production -- 生產(chǎn)環(huán)境  
├── .env.staging -- 測試環(huán)境  
├── .eslintrc.js -- ESLint 配置  
├── .gitignore -- git 忽略  
├── .postcssrc.js -- CSS 預(yù)處理配置(rem 適配)  
├── babel.config.js -- barbel 配置入口  
├── tsconfig.json -- vscode 路徑引入配置
├── package.json -- 依賴管理  
└── vue.config.js -- vue cli4 的 webpack 配置

啟動(dòng)項(xiàng)目


git clone https://github.com/ynzy/vue3-h5-template.git

cd vue3-h5-template

npm install

npm run serve

<span id="top">目錄</span>

<span id="env">? 配置多環(huán)境變量 </span>

package.json 里的 scripts 配置 serve stage build鸟缕，通過 --mode xxx 來執(zhí)行不同環(huán)境

  • 通過 npm run serve 啟動(dòng)本地 , 執(zhí)行 development
  • 通過 npm run stage 啟動(dòng)測試 , 執(zhí)行 development
  • 通過 npm run prod 啟動(dòng)開發(fā) , 執(zhí)行 development
  • 通過 npm run stageBuild 打包測試 , 執(zhí)行 staging
  • 通過 npm run build 打包正式 , 執(zhí)行 production 
"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "cross-env NODE_ENV=dev vue-cli-service serve --mode staging",
  "prod": "cross-env NODE_ENV=dev vue-cli-service serve --mode production",
  "stageBuild": "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_* 變量之外敦冬，在你的應(yīng)用代碼中始終可用的還有兩個(gè)特殊的變量NODE_ENV 和BASE_URL
在項(xiàng)目根目錄中新建.env.*

  • .env.development 本地開發(fā)環(huán)境配置
NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'
  • .env.staging 測試環(huán)境配置
NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'
  • .env.production 正式環(huán)境配置
 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

這里我們并沒有定義很多變量辅搬，只定義了基礎(chǔ)的 VUE_APP_ENV development staging production
變量我們統(tǒng)一在 src/config/env.*.ts 里進(jìn)行管理。

這里有個(gè)問題脖旱，既然這里有了根據(jù)不同環(huán)境設(shè)置變量的文件伞辛，為什么還要去 config 下新建三個(gè)對(duì)應(yīng)的文件呢烂翰？
修改起來方便，不需要重啟項(xiàng)目蚤氏，符合開發(fā)習(xí)慣甘耿。

config/index.js

export interface IConfig {
    env?: string // 開發(fā)環(huán)境
    title?: string // 項(xiàng)目title
    baseUrl?: string // 項(xiàng)目地址
    baseApi?: string // api請(qǐng)求地址
    APPID?: string // 公眾號(hào)appId  一般放在服務(wù)器端
    APPSECRET?: string // 公眾號(hào)appScript 一般放在服務(wù)器端
    $cdn: string // cdn公共資源路徑
}

// 根據(jù)環(huán)境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

并且定義了接口類型，方便我們調(diào)用的時(shí)候可以自動(dòng)識(shí)別參數(shù)

配置對(duì)應(yīng)環(huán)境的變量竿滨，拿本地環(huán)境文件 env.development.js 舉例佳恬，用戶可以根據(jù)需求修改

// 本地環(huán)境配置
module.exports = {
    title: 'vue-h5-template',
    baseUrl: 'http://localhost:9018', // 項(xiàng)目地址
    baseApi: 'https://test.xxx.com/api', // 本地api請(qǐng)求地址
    APPID: 'xxx',
    APPSECRET: 'xxx'
}
調(diào)用 config
import config from '@/config/index'
setup() {
  console.log('環(huán)境配置', config)
}

▲ 回頂部

<span id="rem">? rem 適配方案 </span>

不用擔(dān)心，項(xiàng)目已經(jīng)配置好了 rem 適配, 下面僅做介紹：

Vant 中的樣式默認(rèn)使用px作為單位于游，如果需要使用rem單位毁葱，推薦使用以下兩個(gè)工具:

yarn add postcss-pxtorem --dev
yarn add amfe-flexible --save
PostCSS 配置

下面提供了一份基本的 postcss 配置贰剥，可以在此配置的基礎(chǔ)上根據(jù)項(xiàng)目需求進(jìn)行修改

// 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: ['*']
        }
    }
}

我采用了amfe-flexible進(jìn)行設(shè)置 rem倾剿，看 Github 上說這個(gè)更好一些，使用哪個(gè)自行參考

// main.ts
// 移動(dòng)端適配
import 'amfe-flexible'

更多詳細(xì)信息： vant

新手必看蚌成，老鳥跳過

很多小伙伴會(huì)問我前痘，適配的問題。

我們知道 1rem 等于html 根元素設(shè)定的 font-size 的 px 值担忧。Vant UI 設(shè)置 rootValue: 37.5,你可以看到在 iPhone 6 下
看到 （1rem 等于 37.5px）：

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

切換不同的機(jī)型芹缔，根元素可能會(huì)有不同的font-size。當(dāng)你寫 css px 樣式時(shí)瓶盛，會(huì)被程序換算成 rem 達(dá)到適配最欠。

因?yàn)槲覀冇昧?Vant 的組件，需要按照 rootValue: 37.5 來寫樣式惩猫。

舉個(gè)例子：設(shè)計(jì)給了你一張 750px * 1334px 圖片芝硬，在 iPhone6 上鋪滿屏幕,其他機(jī)型適配。

  • 當(dāng)rootValue: 70 , 樣式 width: 750px;height: 1334px; 圖片會(huì)撐滿 iPhone6 屏幕轧房，這個(gè)時(shí)候切換其他機(jī)型拌阴，圖片也會(huì)跟著撐
    滿炭臭。
  • 當(dāng)rootValue: 37.5 的時(shí)候丸凭，樣式 width: 375px;height: 667px; 圖片會(huì)撐滿 iPhone6 屏幕。

也就是 iphone 6 下 375px 寬度寫 CSS。其他的你就可以根據(jù)你設(shè)計(jì)圖实辑，去寫對(duì)應(yīng)的樣式就可以了。

當(dāng)然藻丢，想要撐滿屏幕你可以使用 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>

▲ 回頂部

<span id="vant">? VantUI 組件按需加載 </span>

項(xiàng)目采用Vant 自動(dòng)按需引入組件 (推薦)下
面安裝插件介紹：

一般來說 ts 使用的是方案二悠反，但是我在用的過程中有一些問題残黑，所以采用了方案一

方案一：

babel-plugin-import 是一款 babel 插件馍佑，它會(huì)在編譯過程中將
import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式

安裝插件

npm i babel-plugin-import -D

在babel.config.js 設(shè)置

// 對(duì)于使用 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
}

方案二：
ts-import-plugin用于 TypeScript 的模塊化導(dǎo)入插件

yarn add ts-import-plugin --dev 然后在 vue.config.js 中加入

const merge = require('webpack-merge')
const tsImportPluginFactory = require('ts-import-plugin')
// * 三方ui在ts下按需加載的實(shí)現(xiàn)
const mergeConfig = config => {
    config.module
        .rule('ts')
        .use('ts-loader')
        .tap(options => {
            options = merge(options, {
                transpileOnly: true,
                getCustomTransformers: () => ({
                    before: [
                        tsImportPluginFactory({
                            libraryName: 'vant',
                            libraryDirectory: 'es',
                            style: true
                        })
                    ]
                }),
                compilerOptions: {
                    module: 'es2015'
                }
            })
            return options
        })
}

使用組件

項(xiàng)目在 src/plugins/vant.js 下統(tǒng)一管理組件梨水，用哪個(gè)引入哪個(gè)拭荤，無需在頁面里重復(fù)引用

// 按需全局引入 vant組件
import { App as VM } from 'vue'
import { Button, Cell, CellGroup, Icon } from 'vant'

const plugins = [Button, Icon, Cell, CellGroup]

export const vantPlugins = {
    install: function(vm: VM) {
        plugins.forEach(item => {
            vm.component(item.name, item)
        })
    }
}

▲ 回頂部

<span id="sass">? Sass 全局樣式</span>

使用dart-sass, 安裝速度比較快，大概率不會(huì)出現(xiàn)安裝不成功

每個(gè)頁面自己對(duì)應(yīng)的樣式都寫在自己的 .vue 文件之中 scoped 它顧名思義給 css 加了一個(gè)域的概念疫诽。

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

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

目錄結(jié)構(gòu)

vue-h5-template 所有全局樣式都在 @/src/assets/css 目錄下設(shè)置

├── assets
│   ├── css
│   │   ├── index.scss               # 全局通用樣式
│   │   ├── reset.scss               # 清除瀏覽器默認(rèn)樣式
│   │   ├── mixin.scss               # 全局mixin
│   │   └── variables.scss           # 全局變量

vue.config.js 添加全局樣式配置

css: {
    loaderOptions: {
        scss: {
            // 向全局sass樣式傳入共享的全局變量, $src可以配置圖片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}";
        }
    }
},

設(shè)置 js 中可以訪問 $cdn,.vue 文件中使用this.$cdn訪問

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

// 設(shè)置 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>

▲ 回頂部

自定義 vant-ui 樣式

現(xiàn)在我們來說說怎么重寫 vant-ui 樣式舅世。由于 vant-ui 的樣式我們是在全局引入的，所以你想在某個(gè)頁面里面覆蓋它的樣式就不能
加 scoped奇徒，但你又想只覆蓋這個(gè)頁面的 vant 樣式雏亚，你就可在它的父級(jí)加一個(gè) class，用命名空間來解決問題摩钙。

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

父組件改變子組件樣式 深度選擇器

當(dāng)你子組件使用了 scoped 但在父組件又想修改子組件的樣式可以 通過 ::v-deep 來實(shí)現(xiàn)：

<style scoped>
::v-deep .a {
    .b { /* ... */ }
}
</style>

▲ 回頂部

<span id="phonex">? 適配蘋果底部安全距離</span>

index.html 的 meta 指定了 viewport-fit=cover

vant 中自帶底部安全距離參數(shù)

<!-- 在 head 標(biāo)簽中添加 meta 標(biāo)簽罢低，并設(shè)置 viewport-fit=cover 值 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>
<!-- 開啟頂部安全區(qū)適配 -->
<van-nav-bar safe-area-inset-top />

<!-- 開啟底部安全區(qū)適配 -->
<van-number-keyboard safe-area-inset-bottom />

如果不用 vant 中的適配，也可以自己寫胖笛，我在 scss 中寫了通用樣式

.fixIphonex {
    padding-bottom: $safe-bottom !important;
    &::after {
        content: '';
        position: fixed;
        bottom: 0 !important;
        left: 0;
        height: calc(#{$safe-bottom} + 1px);
        width: 100%;
        background: #ffffff;
    }
}

▲ 回頂部

<span id="mock">? 使用 Mock 數(shù)據(jù) </span>

mock 請(qǐng)求的封裝采用的是 vue-element-admin 的 mock 請(qǐng)求封裝网持，直接拿來用就可以了

  • mock.js
const Mock = require('mockjs')

const user = require('./user')
// const role = require('./role')
// const article = require('./article')
// const search = require('./remote-search')

// const mocks = [...user, ...role, ...article, ...search]
const mocks = [...user]
// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
function mockXHR() {
    // mock patch
    // https://github.com/nuysoft/Mock/issues/300
    Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
    Mock.XHR.prototype.send = function() {
        if (this.custom.xhr) {
            this.custom.xhr.withCredentials = this.withCredentials || false

            if (this.responseType) {
                this.custom.xhr.responseType = this.responseType
            }
        }
        this.proxy_send(...arguments)
    }

    function XHR2ExpressReqWrap(respond) {
        return function(options) {
            let result = null
            if (respond instanceof Function) {
                const { body, type, url } = options
                // https://expressjs.com/en/4x/api.html#req
                result = respond({
                    method: type,
                    body: JSON.parse(body),
                    query: url
                })
            } else {
                result = respond
            }
            return Mock.mock(result)
        }
    }

    for (const i of mocks) {
        Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
    }
}

module.exports = {
    mocks,
    mockXHR
}
  • user.js
const tokens = {
    admin: {
        token: 'admin-token'
    },
    editor: {
        token: 'editor-token'
    }
}

const users = {
    'admin-token': {
        roles: ['admin'],
        introduction: 'I am a super administrator',
        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        name: 'Super Admin'
    },
    'editor-token': {
        roles: ['editor'],
        introduction: 'I am an editor',
        avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
        name: 'Normal Editor'
    }
}

module.exports = [
    // user login
    {
        url: '/vue-h5/user/login',
        type: 'post',
        response: config => {
            const { username } = config.body
            const token = tokens[username]

            // mock error
            // if (!token) {
            //  return {
            //      code: 60204,
            //      message: 'Account and password are incorrect.'
            //  }
            // }

            return {
                code: 20000,
                data: token,
                msg: '登錄成功'
            }
        }
    },

    // get user info
    {
        url: '/vue-h5/user/info.*',
        type: 'get',
        response: config => {
            const { token } = config.query
            const info = users['admin-token']
            // mock error
            // if (!info) {
            //  return {
            //      code: 50008,
            //      message: 'Login failed, unable to get user details.'
            //  }
            // }

            return {
                code: 20000,
                data: info,
                msg: '登錄成功'
            }
        }
    },

    // user logout
    {
        url: '/vue-h5/user/logout',
        type: 'post',
        response: _ => {
            return {
                code: 20000,
                data: 'success'
            }
        }
    }
]
  • main.js
    如果不需要使用，去除掉這段代碼就可以了
// 使用mock數(shù)據(jù)
if (config.mock) {
    const { mockXHR } = require('../mock')
    mockXHR()
}
  • 接口請(qǐng)求
onMounted(() => {
    axios
        .get('/vue-h5/user/info')
        .then(res => {
            console.log(res)
        })
        .catch(err => {
            console.error(err)
        })
})

<span id="axios">? Axios 封裝及接口管理</span>

utils/request.js 封裝 axios ,開發(fā)者需要根據(jù)后臺(tái)接口做修改匀钧。

  • service.interceptors.request.use 里可以設(shè)置請(qǐng)求頭翎碑，比如設(shè)置 token
  • config.hideloading 是在 api 文件夾下的接口參數(shù)里設(shè)置，下文會(huì)講
  • service.interceptors.response.use 里可以對(duì)接口返回?cái)?shù)據(jù)處理之斯，比如 401 刪除本地信息日杈，重新登錄
/**
 * @description [ axios 請(qǐng)求封裝]
 */
import store from '@/store'
import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
// import { Message, Modal } from 'view-design' // UI組件庫
import { Dialog, Toast } from 'vant'
import router from '@/router'
// 根據(jù)環(huán)境不同引入不同api地址
import config from '@/config'

const service = axios.create({
    baseURL: config.baseApi + '/vue-h5', // url = base url + request url
    timeout: 5000,
    withCredentials: false // send cookies when cross-domain requests
    // headers: {
    //  // clear cors
    //  'Cache-Control': 'no-cache',
    //  Pragma: 'no-cache'
    // }
})

// Request interceptors
service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        // 加載動(dòng)畫
        if (config.loading) {
            Toast.loading({
                message: '加載中...',
                forbidClick: true
            })
        }
        // 在此處添加請(qǐng)求頭等，如添加 token
        // if (store.state.token) {
        // config.headers['Authorization'] = `Bearer ${store.state.token}`
        // }
        return config
    },
    (error: any) => {
        Promise.reject(error)
    }
)

// Response interceptors
service.interceptors.response.use(
    async (response: AxiosResponse) => {
        // await new Promise(resovle => setTimeout(resovle, 3000))
        Toast.clear()
        const res = response.data
        if (res.code !== 0) {
            // token 過期
            if (res.code === 401) {
                // 警告提示窗
                return
            }
            if (res.code == 403) {
                Dialog.alert({
                    title: '警告',
                    message: res.msg
                }).then(() => {})
                return
            }
            // 若后臺(tái)返回錯(cuò)誤值佑刷，此處返回對(duì)應(yīng)錯(cuò)誤對(duì)象莉擒，下面 error 就會(huì)接收
            return Promise.reject(new Error(res.msg || 'Error'))
        } else {
            // 注意返回值
            return response.data
        }
    },
    (error: any) => {
        Toast.clear()
        if (error && error.response) {
            switch (error.response.status) {
                case 400:
                    error.message = '請(qǐng)求錯(cuò)誤(400)'
                    break
                case 401:
                    error.message = '未授權(quán),請(qǐng)登錄(401)'
                    break
                case 403:
                    error.message = '拒絕訪問(403)'
                    break
                case 404:
                    error.message = `請(qǐng)求地址出錯(cuò): ${error.response.config.url}`
                    break
                case 405:
                    error.message = '請(qǐng)求方法未允許(405)'
                    break
                case 408:
                    error.message = '請(qǐng)求超時(shí)(408)'
                    break
                case 500:
                    error.message = '服務(wù)器內(nèi)部錯(cuò)誤(500)'
                    break
                case 501:
                    error.message = '服務(wù)未實(shí)現(xiàn)(501)'
                    break
                case 502:
                    error.message = '網(wǎng)絡(luò)錯(cuò)誤(502)'
                    break
                case 503:
                    error.message = '服務(wù)不可用(503)'
                    break
                case 504:
                    error.message = '網(wǎng)絡(luò)超時(shí)(504)'
                    break
                case 505:
                    error.message = 'HTTP版本不受支持(505)'
                    break
                default:
                    error.message = `連接錯(cuò)誤: ${error.message}`
            }
        } else {
            if (error.message == 'Network Error') {
                error.message == '網(wǎng)絡(luò)異常，請(qǐng)檢查后重試瘫絮！'
            }
            error.message = '連接到服務(wù)器失敗涨冀，請(qǐng)聯(lián)系管理員'
        }
        Toast(error.message)
        // store.auth.clearAuth()
        store.dispatch('clearAuth')
        return Promise.reject(error)
    }
)

export default service

接口管理

在src/api 文件夾下統(tǒng)一管理接口

  • 你可以建立多個(gè)模塊對(duì)接接口, 比如 home.ts 里是首頁的接口這里講解 authController.ts
  • url 接口地址，請(qǐng)求的時(shí)候會(huì)拼接上 config 下的 baseApi
  • method 請(qǐng)求方法
  • data 請(qǐng)求參數(shù) qs.stringify(params) 是對(duì)數(shù)據(jù)系列化操作
  • loading 默認(rèn) false,設(shè)置為 true 后麦萤，顯示 loading ui 交互中有些接口需要讓用戶感知
import request from '@/utils/request'
export interface IResponseType<P = {}> {
    code: number
    msg: string
    data: P
}
interface IUserInfo {
    id: string
    avator: string
}
interface IError {
    code: string
}
export const fetchUserInfo = () => {
    return request<IResponseType<IUserInfo>>({
        url: '/user/info',
        method: 'get',
        loading: true
    })
}

如何調(diào)用

由于awaitWrap類型推導(dǎo)很麻煩鹿鳖，所以還是采用 try catch 來捕獲錯(cuò)誤，既能捕獲接口錯(cuò)誤壮莹，也能捕獲業(yè)務(wù)邏輯錯(cuò)誤

onMounted(async () => {
    try {
        let res = await fetchUserInfo()
        console.log(res)
    } catch (error) {
        console.log(error)
    }
})

▲ 回頂部

<span id="vuex">? Vuex 狀態(tài)管理</span>

目錄結(jié)構(gòu)

├── store
│   ├── modules
│   ├── |── Auth
│   ├── ├── ├── index.ts
│   ├── ├── ├── interface.ts
│   ├── ├── └── types.ts
│   ├── index.ts
│   ├── getters.ts

類型定義

  • 模塊類型

interface.ts

import { IUserInfo } from '@/api/interface'

/**
 * 用戶信息
 */
export interface IAuthState {
    userInfo: IUserInfo
}

index.ts

import { Module } from 'vuex'
import { IGlobalState } from '@/store/index'
import { IAuthState } from '@/store/modules/Auth/interface'
import * as Types from '@/store/modules/Auth/types'

const state: IAuthState = {
    userInfo: {}
}

const login: Module<IAuthState, IGlobalState> = {
    namespaced: true,
    state,
    mutations: {
        [Types.SAVE_USER_INFO](state, data) {
            state.userInfo = data
        }
    },
    actions: {
        async [Types.SAVE_USER_INFO]({ commit }, data) {
            return commit(Types.SAVE_USER_INFO, data)
        }
    }
}

export default login
  • 全局 store 類型

將模塊類型導(dǎo)入到 index.ts,定義全局類型

import { IAuthState } from './modules/Auth/interface'

export interface IGlobalState {
    auth: IAuthState
}

const store = createStore<IGlobalState>({
    getters,
    modules: {
        auth
    }
})

export default store

main.ts 引入

import { createApp } from 'vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

使用

import { fetchUserInfo } from '@/api/authController.ts'
import { useStore } from 'vuex'
import * as Types from '@/store/modules/Auth/types'
import { IGlobalState } from '@/store'

export default defineComponent({
    name: 'about',
    props: {},
    setup(props) {
        const store = useStore<IGlobalState>()
        const userInfo = computed(() => {
            return store.state.auth.userInfo
        })
        onMounted(async () => {
            try {
                let res = await fetchUserInfo()
                if (res.code !== 0) return new Error(res.msg)
                // Action 通過 store.dispatch 方法觸發(fā)
                store.dispatch(`auth/${Types.SAVE_USER_INFO}`, res.data)
            } catch (error) {
                console.log(error)
            }
        })
        return {
            userInfo
        }
    }
})

▲ 回頂部

<span id="router">? Vue-router </span>

本案例主要采用 history 模式翅帜，開發(fā)者根據(jù)需求修改 mode base

前往:vue.config.js 基礎(chǔ)配置

import { createRouter, createWebHistory } from 'vue-router'
import { constantRouterMap } from './router.config'

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    // 在按下 后退/前進(jìn) 按鈕時(shí)，就會(huì)像瀏覽器的原生表現(xiàn)那樣
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition
        } else {
            return { top: 0 }
        }
    },
    routes: constantRouterMap
})

export default router

import { RouteRecordRaw } from 'vue-router'

export const constantRouterMap: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Home',
        component: () => import('@/views/layouts/index.vue'),
        redirect: '/home',
        meta: {
            title: '首頁',
            keepAlive: false
        },
        children: [
            {
                path: '/home',
                name: 'Home',
                component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/home/index.vue'),
                meta: { title: '首頁', keepAlive: false, showTab: true }
            },
            {
                path: '/demo',
                name: 'Dome',
                component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/dome/index.vue'),
                meta: { title: '首頁', keepAlive: false, showTab: true }
            },
            {
                path: '/about',
                name: 'About',
                component: () => import(/* webpackChunkName: "tabbar" */ '@/views/tabBar/about/index.vue'),
                meta: { title: '關(guān)于我', keepAlive: false, showTab: true }
            }
        ]
    }
]

更多:Vue Router

▲ 回頂部

<span id="base">? Webpack 4 vue.config.js 基礎(chǔ)配置 </span>

如果你的 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: './', // 署應(yīng)用包時(shí)的基本 URL命满。 vue-router hash 模式使用
    publicPath: '/app/', // 署應(yīng)用包時(shí)的基本 URL涝滴。  vue-router history模式使用
    outputDir: 'dist', //  生產(chǎn)環(huán)境構(gòu)建文件的目錄
    assetsDir: 'static', //  outputDir的靜態(tài)資源(js、css、img歼疮、fonts)目錄
    lintOnSave: !IS_PROD,
    productionSourceMap: false, // 如果你不需要生產(chǎn)環(huán)境的 source map杂抽，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建。
    devServer: {
        port: 9020, // 端口號(hào)
        open: false, // 啟動(dòng)后打開瀏覽器
        overlay: {
            //  當(dāng)出現(xiàn)編譯器錯(cuò)誤或警告時(shí)韩脏，在瀏覽器中顯示全屏覆蓋層
            warnings: false,
            errors: true
        }
        // ...
    }
}

▲ 回頂部

<span id="alias">? 配置 alias 別名 </span>

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'))
    }
}

▲ 回頂部

<span id="proxy">? 配置 proxy 跨域 </span>

如果你的項(xiàng)目需要跨域設(shè)置缩麸，你需要打來 vue.config.js proxy 注釋 并且配置相應(yīng)參數(shù)

<u>!!!注意：你還需要將 src/config/env.development.js 里的 baseApi 設(shè)置成 '/'</u>

module.exports = {
    devServer: {
        // ....
        proxy: {
            //配置跨域
            '/api': {
                target: 'https://test.xxx.com', // 接口的域名
                // ws: true, // 是否啟用websockets
                changOrigin: true, // 開啟代理，在本地創(chuàng)建一個(gè)虛擬服務(wù)端
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

使用 例如: src/api/home.js

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

▲ 回頂部

<span id="bundle">? 配置 打包分析 </span>

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

▲ 回頂部

<span id="externals">? 配置 externals 引入 cdn 資源 </span>

這個(gè)版本 CDN 不再引入赡矢，我測試了一下使用引入 CDN 和不使用,不使用會(huì)比使用時(shí)間少匙睹。網(wǎng)上不少文章測試 CDN 速度塊，這個(gè)開發(fā)者可
以實(shí)際測試一下济竹。

另外項(xiàng)目中使用的是公共 CDN 不穩(wěn)定痕檬，域名解析也是需要時(shí)間的（如果你要使用請(qǐng)盡量使用同一個(gè)域名）

因?yàn)轫撁婷看斡龅?code><script>標(biāo)簽都會(huì)停下來解析執(zhí)行，所以應(yīng)該盡可能減少<script>標(biāo)簽的數(shù)量 HTTP請(qǐng)求存在一定的開銷送浊，100K
的文件比 5 個(gè) 20K 的文件下載的更快梦谜，所以較少腳本數(shù)量也是很有必要的

暫時(shí)還沒有研究放到自己的 cdn 服務(wù)器上。

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外鏈袭景，會(huì)插入到index.html中
const cdn = {
    // 開發(fā)環(huán)境
    dev: {
        css: [],
        js: []
    },
    // 生產(chǎn)環(huán)境
    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
        // 為生產(chǎn)環(huán)境修改配置...
        if (IS_PROD) {
            // externals
            config.externals = externals
        }
    },
    chainWebpack: config => {
        /**
         * 添加CDN參數(shù)到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>
    <% } %>

▲ 回頂部

<span id="console">? 去掉 console.log </span>

保留了測試環(huán)境和本地環(huán)境的 console.log

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

在 babel.config.js 中配置

// 獲取 VUE_APP_ENV 非 NODE_ENV，測試環(huán)境依然 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
}

▲ 回頂部

<span id="chunks">? splitChunks 單獨(dú)打包第三方模塊</span>

module.exports = {
    chainWebpack: config => {
        config.when(IS_PROD, config => {
            config
                .plugin('ScriptExtHtmlWebpackPlugin')
                .after('html')
                .use('script-ext-html-webpack-plugin', [
                    {
                        // 將 runtime 作為內(nèi)聯(lián)引入不單獨(dú)存在
                        inline: /runtime\..*\.js$/
                    }
                ])
                .end()
            config.optimization.splitChunks({
                chunks: 'all',
                cacheGroups: {
                    // cacheGroups 下可以可以配置多個(gè)組耸棒，每個(gè)組根據(jù)test設(shè)置條件荒澡，符合test條件的模塊
                    commons: {
                        name: 'chunk-commons',
                        test: resolve('src/components'),
                        minChunks: 3, //  被至少用三次以上打包分離
                        priority: 5, // 優(yōu)先級(jí)
                        reuseExistingChunk: true // 表示是否使用已有的 chunk，如果為 true 則表示如果當(dāng)前的 chunk 包含的模塊已經(jīng)被抽取出去了与殃，那么將不會(huì)重新生成新的单山。
                    },
                    node_vendors: {
                        name: 'chunk-libs',
                        chunks: 'initial', // 只打包初始時(shí)依賴的第三方
                        test: /[\\/]node_modules[\\/]/,
                        priority: 10
                    },
                    vantUI: {
                        name: 'chunk-vantUI', // 單獨(dú)將 vantUI 拆包
                        priority: 20, // 數(shù)字大權(quán)重到，滿足多個(gè) cacheGroups 的條件時(shí)候分到權(quán)重高的
                        test: /[\\/]node_modules[\\/]_?vant(.*)/
                    }
                }
            })
            config.optimization.runtimeChunk('single')
        })
    }
}

▲ 回頂部

<span id="gzip">? gzip 壓縮</span>

可能會(huì)報(bào)錯(cuò)幅疼，安裝低版本
參考地址https://www.cnblogs.com/wuzhiquan/p/14179388.html

// * 打包gzip
const assetsGzip = config => {
    config.plugin('compression-webpack-plugin').use(require('compression-webpack-plugin'), [
        {
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.html$|\.json$|\.css/,
            threshold: 10240, // 只有大小大于該值的資源會(huì)被處理 10240
            minRatio: 0.8, // 只有壓縮率小于這個(gè)值的資源才會(huì)被處理
            deleteOriginalAssets: true // 刪除原文件
        }
    ])
}

▲ 回頂部

<span id="uglifyjs">? uglifyjs 壓縮</span>

需要注意米奸，使用此插件，需要把 es6 代碼轉(zhuǎn)成 es5 代碼爽篷，此項(xiàng)目沒有使用

// * 代碼壓縮
const codeUglify = config => {
    config.plugin('uglifyjs-webpack-plugin').use(require('uglifyjs-webpack-plugin'), [
        {
            uglifyOptions: {
                //生產(chǎn)環(huán)境自動(dòng)刪除console
                compress: {
                    drop_debugger: true,
                    drop_console: false,
                    pure_funcs: ['console.log']
                }
            },
            sourceMap: false,
            parallel: true
        }
    ])
}

▲ 回頂部

<span id="vconsole">? vconsole 移動(dòng)端調(diào)試 </span>

參考地址：https://github.com/AlloyTeam/AlloyLever
參考地址：https://www.cnblogs.com/liyinSakura/p/9883777.html

<!-- MobileConsole -->
<template>
    <teleport to="#vconsole">
        <div class="vc-tigger" @click="toggleVc"></div>
    </teleport>
</template>
<script lang="ts">
import { defineComponent, onUnmounted, reactive } from 'vue'
import VConsole from 'vconsole'
import config from '@/config'
import { useDOMCreate } from '@/hooks/useDOMCreate'
interface IState {
    lastClickTime: number
    count: number
    limit: number
    vConsole: any
}
export default defineComponent({
    name: 'MobileConsole',
    props: {},
    setup() {
        useDOMCreate('vconsole')
        const state = reactive<IState>({
            lastClickTime: 0,
            count: 0,
            limit: ['production', 'prod'].includes(config.env || '') ? 5 : 0,
            vConsole: null
        })
        const hasClass = (obj: HTMLElement | null, cls: string) => {
            return obj?.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
        }
        const addClass = (obj: HTMLElement | null, cls: string) => {
            if (!hasClass(obj, cls)) obj?.classList.add(cls)
        }
        const removeClass = (obj: HTMLElement | null, cls: string) => {
            if (hasClass(obj, cls)) {
                obj?.classList.remove(cls)
            }
        }
        const toggleClass = (obj: HTMLElement | null, cls: string) => {
            if (hasClass(obj, cls)) {
                removeClass(obj, cls)
            } else {
                addClass(obj, cls)
            }
        }
        const toggleVc = () => {
            const nowTime = new Date().getTime()
            if (nowTime - state.lastClickTime < 3000) {
                state.count++
            } else {
                state.count = 0
            }
            state.lastClickTime = nowTime
            if (state.count >= state.limit) {
                if (!state.vConsole) {
                    state.vConsole = new VConsole()
                }
                let vconDom = document.getElementById('__vconsole')
                toggleClass(vconDom, 'vconsole_show')
                state.count = 0
            }
        }
        onUnmounted(() => {
            state.vConsole = null
        })
        return {
            toggleVc
        }
    }
})
</script>
<style lang="scss" scoped>
.vc-tigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: red;
}
</style>
  • 在組件中設(shè)置暗門悴晰，點(diǎn)擊幾次顯示 vconsole
    • 在 app.vue 中通過 limit 進(jìn)行設(shè)置
    • 開發(fā)測試環(huán)境點(diǎn)擊一次就可顯示
    • 生產(chǎn)環(huán)境點(diǎn)擊 5 次

teleport

官方文檔:https://v3.cn.vuejs.org/guide/teleport.html

以前的彈框之類的組件哪里引用，dom 元素就在哪里逐工，它可以幫助我們把這些代碼從組件代碼中分離開铡溪，方便我們更好查看 dom 元素組成

useDOMCreate 可以幫助我們便捷創(chuàng)建 dom 元素，這樣就不需要在 index.html 去創(chuàng)建 teleport 需要的 dom 元素了

▲ 回頂部

<span id="dyntitle">? 動(dòng)態(tài)設(shè)置 title </span>

export const useDocumentTitle = (title: string) => {
    document.title = title
}

router/index.ts 使用

router.beforeEach((to, from, next) => {
    useDocumentTitle(to.meta.title)
    next()
})

▲ 回頂部

<span id="storage">? 本地存儲(chǔ) storage 封裝 </span>

案例在：dome/storage/index.vue 下

引用：

import { storage } from '@/utils/storage'

調(diào)用：

storage.set('data', originalData.value)
storageData.value = storage.get('data')

▲ 回頂部

<span id="jssdk">? 配置 Jssdk </span>

TODO： 待更新

安裝：

yarn add weixin-js-sdk

類型聲明寫在了 model/weixin-js-sdk.d.ts

由于蘋果瀏覽器只識(shí)別第一次進(jìn)入的路由泪喊，所以需要先處理下配置使用的 url

  • router.ts
    此處的jssdk配置僅供演示棕硫，正常業(yè)務(wù)邏輯需要配合后端去寫
import { isWeChat } from '../utils/index'
import { fetchWeChatAuth } from '@/api/WxController'
import { getQueryParams, phoneModel } from '@/utils'
import store from '@/store'

// 路由開始進(jìn)入
router.beforeEach((to, from, next) => {
  //! 解決ios微信下，分享簽名不成功的問題,將第一次的進(jìn)入的url緩存起來窘俺。
  if (window.entryUrl === undefined) {
    window.entryUrl = location.href.split('#')[0]
  }
    const { code } = getQueryParams<IQueryParams>()
        // 微信瀏覽器內(nèi)微信授權(quán)登陸
        // && !store.state.auth.userInfo.name
        if (isWeChat()) {
            if (code) {
                store.commit('auth/STE_ISAUTH', true)
                store.commit('auth/STE_CODE', code)
            }
            if (!store.state.auth.isAuth) {
                location.href = fetchWeChatAuth()
            }
        }
  next()
})
router.afterEach((to, from, next) => {
  let url
  if (phoneModel() === 'ios') {
    url = window.entryUrl
  } else {
    url = window.location.href
  }
    // 保存url
  store.commit('link/SET_INIT_LINK', url)
})

store/Link

import { Module } from 'vuex'
import { IGlobalState } from '@/store/index'
import { ILinkState } from '@/store/modules/Link/interface'

const state: ILinkState = {
  initLink: ''
}

const login: Module<ILinkState, IGlobalState> = {
  namespaced: true,
  state,
  mutations: {
    ['SET_INIT_LINK'](state, data) {
      console.log(data)
      state.initLink = data
    }
  },
  actions: {}
}

export default login

由于window沒有entryUrl變量饲帅，需要聲明文件進(jìn)行聲明

typings.ts

declare interface Window {
  entryUrl: any
}

創(chuàng)建 hooks 函數(shù)

hooks/useWxJsSdk.ts

每個(gè)頁面使用jssdk，都需要調(diào)用一次useWxJsSdk,然后再使用其他封裝的函數(shù)

調(diào)用：

▲ 回頂部

<span id="pettier">? Eslint + Pettier 統(tǒng)一開發(fā)規(guī)范 </span>

參考Typescript的代碼檢查

VScode 安裝 eslint prettier vetur 插件

在文件 .prettierrc 里寫 屬于你的 pettier 規(guī)則
或者prettier.config.js

module.exports =  {
  "wrap_line_length": 120,
  "wrap_attributes": "auto",
  "eslintIntegration":true,
  "overrides": [
    {
      "files": ".prettierrc",
      "options": {
        "parser": "json"
      }
    }
  ],
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 個(gè)空格縮進(jìn)
    tabWidth: 2,
    // 不使用縮進(jìn)符瘤泪，而使用空格
    useTabs: false,
    // 行尾需要有分號(hào)
    semi: true,
    // 使用單引號(hào)
    singleQuote: true,
    // 對(duì)象的 key 僅在必要時(shí)用引號(hào)
    quoteProps: 'as-needed',
    // jsx 不使用單引號(hào)灶泵，而使用雙引號(hào)
    jsxSingleQuote: false,
    // 末尾不需要逗號(hào)
    trailingComma: 'none',
    // 大括號(hào)內(nèi)的首尾需要空格
    bracketSpacing: true,
    // jsx 標(biāo)簽的反尖括號(hào)需要換行
    jsxBracketSameLine: false,
    // 箭頭函數(shù)，只有一個(gè)參數(shù)的時(shí)候对途，也需要括號(hào) avoid
    arrowParens: 'always',
    // 每個(gè)文件格式化的范圍是文件的全部內(nèi)容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要寫文件開頭的 @prettier
    requirePragma: false,
    // 不需要自動(dòng)在文件開頭插入 @prettier
    insertPragma: false,
    // 使用默認(rèn)的折行標(biāo)準(zhǔn) always
    proseWrap: 'preserve',
    // 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 換行符使用 lf auto
    endOfLine: 'lf'
}

.eslintrc.js 配置

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    // 禁止使用 var
    'no-var': 'error',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    '@typescript-eslint/no-empty-function': 0,
    '@typescript-eslint/no-var-requires': 0,
    '@typescript-eslint/interface-name-prefix': 0,
    '@typescript-eslint/no-explicit-any': 0 // TODO
  }
};

Vscode setting.json 設(shè)置

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[tavascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 保存時(shí)用eslint格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 兩者會(huì)在格式化js時(shí)沖突赦邻，所以需要關(guān)閉默認(rèn)js格式化程序
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "vetur.format.defaultFormatter.html": "none",
  // js/ts程序用eslint，防止vetur中的prettier與eslint格式化沖突
  "vetur.format.defaultFormatter.js": "none",
  "vetur.format.defaultFormatter.ts": "none",
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  // "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    }
  ],
  "typescript.tsdk": "node_modules/typescript/lib"
}

▲ 回頂部

鳴謝

vue-h5-template
vue-cli4-config
vue-element-admin

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末实檀，一起剝皮案震驚了整個(gè)濱河市惶洲，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌膳犹，老刑警劉巖恬吕，帶你破解...
    沈念sama閱讀 218,755評(píng)論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異须床，居然都是意外死亡铐料，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門豺旬，熙熙樓的掌柜王于貴愁眉苦臉地迎上來钠惩，“玉大人，你說我怎么就攤上這事族阅÷耍” “怎么了？”我有些...
    開封第一講書人閱讀 165,138評(píng)論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵坦刀，是天一觀的道長愧沟。 經(jīng)常有香客問我，道長鲤遥，這世上最難降的妖魔是什么央渣？ 我笑而不...
    開封第一講書人閱讀 58,791評(píng)論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮渴频，結(jié)果婚禮上芽丹，老公的妹妹穿的比我還像新娘。我一直安慰自己卜朗，他們只是感情好拔第，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著场钉，像睡著了一般蚊俺。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上逛万，一...
    開封第一講書人閱讀 51,631評(píng)論 1贊 305
  • 城市分裂傳說
    那天泳猬，我揣著相機(jī)與錄音，去河邊找鬼。 笑死得封，一個(gè)胖子當(dāng)著我的面吹牛埋心，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播忙上，決...
    沈念sama閱讀 40,362評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼拷呆，長吁一口氣：“原來是場噩夢(mèng)啊……” “哼！你這毒婦竟也來了疫粥？” 一聲冷哼從身側(cè)響起茬斧，我...
    開封第一講書人閱讀 39,264評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎梗逮，沒想到半個(gè)月后项秉，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡慷彤，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年伙狐，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瞬欧。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡贷屎，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出艘虎，到底是詐尸還是另有隱情唉侄，我是刑警寧澤，帶...
    沈念sama閱讀 35,742評(píng)論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布野建，位于F島的核電站属划，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏候生。R本人自食惡果不足惜同眯，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望唯鸭。 院中可真熱鬧须蜗，春花似錦、人聲如沸目溉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽缭付。三九已至柿估，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間陷猫，已是汗流浹背秫舌。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工的妖， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人足陨。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3贊 371
  • 代替公主和親
    正文 我出身青樓嫂粟，卻偏偏與公主長得像，于是被迫代替她去往敵國和親钠右。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2贊 355