1. 在項目中安裝 composition-api 體驗 vue3 新特性

npm install @vue/composition-api --save
# OR
yarn add @vue/composition-api

在使用任何 @vue/composition-api 提供的能力前，必須先通過 Vue.use() 進行安裝

import Vue from 'vue'
import VueCompositionApi from '@vue/composition-api'
Vue.use(VueCompositionApi)

2.配置jsx

https://github.com/vuejs/jsx#installation
安裝插件

yarn add babel-preset-vca-jsx --dev

配置 Babel

{
  presets: ["vca-jsx", "@vue/cli-plugin-babel/preset"]
}

JSX/TSX 支持

對于 TSX 支持，請在你的項目中創建如下聲明文件：

// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends ComponentRenderProxy {}
    interface ElementAttributesProperty {
      $props: any; // specify the property name to use
    }
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

3.安裝常用相關依賴

yarn add axios element-ui lodash dayjs
yarn add @types/lodash --dev  //ts 類型

4.導入css 預處理器的一些公共的樣式文件變量

導入css 預處理器的一些公共的樣式文件變量，比如：variables , mixins , functions，避免在每個樣式文件中手動的@import導入，然后在各個css 文件中直接使用 變量。
例如sass

//方法1
npm i style-resources-loader 
npm i vue-cli-plugin-style-resources-loader
//方法2
vue add style-resources-loader 
//vue add pluginName 是vue-cli3提供的。vue add 是用yarn安裝插件的， yarn源的問題有可能導致失敗。如果安裝失敗的話，就采用方法一

配置 具體見 https://github.com/yenshih/style-resources-loader

//在 vue-cli中的配置
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                // 這個是絕對路徑,不能使用 alias中配置的別名路徑，如@表示的src
                path.resolve(__dirname, './src/style/params.less')
            ]
        }
    },
    ……
    其他配置
    ……
}

//在普通webpack 中的配置, 可以同時使用 多個預處理器。
module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'less-loader', 'less-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [ // 只有一條時也可以寫成對象形式, 
                        path.resolve(__dirname, 'path/to/scss/variables/*.less'),
                        path.resolve(__dirname, 'path/to/scss/mixins/*.less'),
                    ],//字符串或數組，表示導入資源的路徑，必須是絕對路徑
                    injector: 'append' // 如果在樣式文件之后導入就加此行配置
                }
            }]
        }]
    },
    // ...
}

5. 使用ESLint+Prettier來統一前端代碼風格

首先配置大漂亮 prettier

yarn add prettier --dev
yarn add eslint-plugin-prettier--dev