vite2+Vue3+elementPlus+eslint

開始

vite2新型前端構建工具，能夠顯著提升前端開發體驗，話不多說，我們先來體驗一下

搭建vite項目

Vite 需要 Node.js 版本 >= 12.0.0。

# NPM
npm init @vitejs/app

# YARN 
yarn create @vitejs/app

然后按照操作,選擇你想要的模板執行就行。

我們可以通過附加的命令行選項直接指定項目名稱和你想要使用的模板，可以直接生成項目

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要額外的雙橫線：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

配置項目

首先看下項目結構：

# my-vue-app

├── index.html
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   └── main.js
├── tree.md
└── vite.config.js

打開項目，我們看到結構還是cli4結構類似的，就是簡單了好多了。

vite2現在還沒有開箱即用的模板，供我們使用，不過文檔還是比較全面的。vite中文文檔，

下面我們配置下：

1. vue-router

 # vue-router4.0正式版已經發布，我們使用4.0版本
 # 如果你想下載最新版本 yarn add vue-router@4. 會讓你選擇4.0所有版本，你選擇想要的版本即可

 # NPM
 npm install vue-router@4.0.4

 # YARN
 yarn add vue-router@4.0.4

1. 在src創建router文件夾，新建index.js文件

 import { createRouter, createWebHashHistory } from 'vue-router'
 import Home from '../views/Home.vue'

 const routes = [
   {
     path: '/',
     name: 'Home',
     component: Home
   },
   {
     path: '/about',
     name: 'About',
     component: () => import('@/views/About.vue') // @/views設置的別名
   }
 ]

 const router = createRouter({
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes
 })

 export default router

2. 在main.js引入router

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

3. 修改App.vue文件

<template>
  <router-view />
</template>

<script setup>
</script>

<style></style>         

4. src添加Home.vue

<template>
  <router-link to="/">
    Home
  </router-link>
  <router-link to="/about">
    About
  </router-link>
</template>

<script>
export default {

}
</script>

5. src添加About.vue

//  About.vue
<template>
  <div>About</div>
</template>

<script>
export default {

}
</script>

<style></style>

在鏈接中輸入http://localhost:8000/#/about 內容顯示about，那么恭喜你已經配置成功了。

6. 模塊化

如果你想把項目模塊化，可以按照下面的結構和方式配置(vuex類似)，如果不是，請跳過此步驟

 ├── index.html
 ├── package.json
 ├── public
 │   └── favicon.ico
 ├── src
 │   ├── App.vue
 │   ├── assets
 │   │   └── logo.png
 │   ├── components
 │   │   └── HelloWorld.vue
 │   ├── main.js
 │   ├── router
 │   │   └── index.js
 │   └── views
 │       ├── Home.vue
 │       ├── about
 │       │   ├── index.vue
 │       │   └── router
 │       │       └── index.js
 │       └── indo
 │           ├── index.vue
 │           └── router
 │               └── index.js
 ├── tree.md
 ├── vite.config.js
 └── yarn.lock

 // about/router/index.js
 export default [
   {
     path: '/about',
     name: 'About',
     component: () => import('../index.vue'),
   },
 ];

每一個模塊都包含一個router文件夾，我們可以通過動態引入的方式引入模塊中的路由，了解詳情 不用一個一個去引入，在src/router中設置

// src/router/index.js 
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routesModules = import.meta.globEager('../views/**/*.js')
const modules = []
Object.keys(routesModules).forEach(key => {
  modules.push(...routesModules[key].default)
})
console.log('modules: ', modules);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  ...modules
]

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

export default router

在鏈接中輸入http://localhost:8000/#/info 內容顯示Info，那么恭喜你已經配置成功了。

2. 安裝scss

# NPM
npm install scss -D

# YARN 
yarn add scss -D

一般我們都是設置公用的scss文件，統一設置公用的樣式，方便統一修改統一的樣式

1. 我們可以在src新建styles文件夾，新建common.scss文件

$themeColor: #f4364c;

2. 在vite.config.js中設置公用的引入common.scss就可以直接在vue文件中使用公用的樣式了

import { defineConfig } from 'vite'
const {resolve} = require('path')
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 8000 // 配置啟用的端口號
  },
  resolve:{
    // 設置別名
    alias:{
      '@/views': resolve(__dirname, 'src/views/'),
      '@/styles': resolve(__dirname, 'src/styles/')
    }
  },
  css: {
    preprocessorOptions: {
      // 引入公用的樣式
      scss: {
        additionalData: `@import "@/styles/common.scss";`
      }
    }
  }
})

測試：

# About.vue
<template>
 <div class="about">About</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.about {
  color: themeColor;
 }
</style>

3. vuex

 # vuex正式版已經發布，我們使用4.0版本，
 # 如果你想下載最新版本 yarn add vuex@4. 會讓你選擇4.0所有版本，你選擇想要的版本即可

 # NPM
 npm install vuex@4.0.0

 # YARN
 yarn add vuex@4.0.0

1. src下添加store文件夾，新建index.js

 import {createStore} from 'vuex'
      
 const store = createStore({
   state: {
     count: 0
   },
   mutations: {
     increment (state) {
       state.count++
     }
   },
   getters: { },
   actions: { }
 })

 export default store

2. 在main.js引入vuex

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

 createApp(App).use(router).use(store).mount('#app')

3. 持久化，需要下載vuex-persistedstate

 # NPM
 npm installvuex-persistedstate@4.0.0

 # YARN
 yarn add vuex-persistedstate@4.0.0

4. store/index.js 中配置

  import { createStore } from 'vuex'
  import createPersistedState from 'vuex-persistedstate'

  const store = createStore({
    ...

    plugins: [
      createPersistedState({
        storage: window.sessionStorage // 修改存儲的狀態
      })
    ] // 狀態持久化
  })

  export default store

5. 如果想模塊化，可以參考 詳情

4. Eslint

讓我們的代碼有更好的代碼規范和統一的代碼格式，方面多人開發，和閱讀代碼。

1. 首先安裝eslint以及其他的依賴

 # NPM
 npm install eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-vue -D
 
 # YARN 
 yarn add eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-vue -D

2. 根目錄添加 .eslintrc.js

module.exports = {
  extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['vue'],
  rules: {
    // 自己寫一些想配置的規則
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生產環境禁用consele
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 生產環境禁用debugger
    'linebreak-style': 'off', // 忽略檢測換行風格
    'vue/max-attributes-per-line': 'off', // 關閉強制 html 標簽換行
    'no-param-reassign': ['error', { props: false }], // 允許修改參數中的屬性值
    'prefer-destructuring': ['error', { object: true, array: false }], // 允許數組通過下標取值
    'max-len': 'off', // 對象選項
    'no-use-before-define': 'off', // 允許定義之前使用
    'func-names': 'off', // 允許使用匿名函數
    'no-shadow': ['error', { allow: ['state'] }], // 允許對其進行陰影處理
    'import/prefer-default-export': 'off', // 模塊只輸出一個變量時，是否需要添加default
    'no-plusplus': 'off', // 一元運算符
  },
  overrides: [
    {
      files: ['*.vue'],
      rules: {
        // 這里寫覆蓋vue文件的規則
      },
    },
  ],
};

3. 配置vscode

根目錄添加 .vscode文件夾，文件夾下添加settings.json

// settings.json
{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": true
    },
    "[json]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
}

4. 測試eslint

隨便打開一個文件。我們用main.js為例，

如果出現eslint報錯的情況，恭喜eslint已經生效了。

按下快捷鍵 Ctrl + Shift + P, 輸入 ESLint: Manage Library Execution 選擇並回車

會出現下圖顯示：

選中彈框的 Allow Everywhere 選項, 右下角的圖標變為 √√ESLint

點擊保存就會自動格式化我們的代碼以及規范我們的代碼。

了解更多 ESLint中文網 airbnb(愛彼迎)代碼規范 airbnb代碼規范 Vue代碼規范

5. 安裝Element Plus

# NPM
npm install element-plus --save

# YARN
yarn add element-plus --save

main.js中引入element-ui

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import router from './router';
import App from './App.vue';
import 'element-plus/lib/theme-chalk/index.css';

createApp(App).use(router).use(ElementPlus).mount('#app');

6. axios

1. 下載axios

# NPM
npm install axios --save

# YARN
yarn add axios --save

2. 封裝axios請求

/**
 * @file axios請求封裝
 */
import axios from 'axios';
import { ElMessage } from 'element-plus';
// import { store } from '../store';

// 請求失敗錯誤信息提示
function checkCode(message) {
  // 彈出錯誤信息
  ElMessage.closeAll();
  ElMessage({ message, type: 'error', customClass: 'deep-message' });
  // ElMessage.error(message)
}

// 響應時間
axios.defaults.timeout = 10000;
// `withCredentails`選項表明了是否是跨域請求
axios.defaults.withCredentials = true;
// 設置默認請求頭
axios.defaults.headers = {
  'X-Requested-With': 'XMLHttpRequest',
  'Content-Type': 'application/json; charset=UTF-8',
};

const pending = []; // 聲明一個數組用於存儲每個ajax請求的取消函數和ajax標識
const cancelToken = axios.CancelToken;
const removePending = (config) => {
  const resUrl = `${config.url}&${config.method}`;
  // eslint-disable-next-line no-restricted-syntax
  for (const p in pending) {
    if (pending[p].url === resUrl) { // 當當前請求在數組中存在時執行函數體
      pending[p].fn(); // 執行取消操作
      pending.splice(p, 1); // 把這條記錄從數組中移除
    }
  }
};

// 添加請求攔截器
axios.interceptors.request.use(
  (config) => {
    // 獲取token
    // if (store.state.common.token) {
    //   // 判斷是否存在token，如果存在的話，則每個http header都加上token
    //   config.headers.Authorization = store.state.common.token;
    // }
    removePending(config); // 在一個ajax發送前執行一下取消操作
    // eslint-disable-next-line new-cap
    config.cancelToken = new cancelToken((cf) => {
      // 這里的ajax標識我是用請求地址&請求方式拼接的字符串，當然你可以選擇其他的一些方式
      pending.push({ url: `${config.url}&${config.method}`, fn: cf });
    });
    return config;
  },
  (error) =>
    // endLoading()
    // eslint-disable-next-line implicit-arrow-linebreak
    Promise.reject(error),

);

// 添加返回攔截器
axios.interceptors.response.use(
  (response) => {
    // endLoading()
    removePending(response.config); // 在一個ajax響應后再執行一下取消操作，把已經完成的請求從pending中移除
    const { data, data: { code } } = response || {};
    const listCode = [0, 1001, 1000, 1100];
    if (typeof response !== 'undefined') {
      if (listCode.includes(code)) return data;
      if (response.data.msg) return response.data;
      checkCode(response.data.message);
    }
    return '';
  },
  (error) => {
    if (error && error.response) {
      switch (error.response.status) {
        case 400:
          error.message = '請求錯誤';
          break;
        case 401:
          error.message = '登錄過期，請重新登錄';
          // 跳到登錄界面
          localStorage.clear();
          sessionStorage.clear();
          break;
        case 403:
          error.message = '拒絕訪問';
          break;
        case 404:
          error.message = '請求失敗';
          break;
        case 408:
          error.message = '請求超時';
          break;
        case 500:
          error.message = '服務器內部錯誤';
          break;
        case 501:
          error.message = '服務未實現';
          break;
        case 502:
          error.message = '無法連接服務器';
          break;
        case 503:
          error.message = '服務不可用';
          break;
        case 504:
          error.message = '連接服務器超時';
          break;
        case 505:
          error.message = 'HTTP版本不受支持';
          break;
        default:
      }
    } else {
      // error.message = '無法連接服務器'
    }
    // 對返回的錯誤處理
    return Promise.reject(error);
  },
);

export default {
  async get(url, params) {
    try {
      const res = await axios.get(url, { params });
      return typeof res.data !== 'undefined' && res.data;
    } catch (err) {
      return checkCode(err.message);
    }
  },
  async post(url, params) {
    try {
      const res = await axios({
        method: 'post',
        url,
        data: params,
      });
      return typeof res.data !== 'undefined' && res.data;
    } catch (err) {
      return checkCode(err.message);
    }
  },
  async put(url, params) {
    try {
      const res = await axios({
        method: 'put',
        url,
        data: params,
      });
      return typeof res.data !== 'undefined' && res.data;
    } catch (err) {
      return checkCode(err.message);
    }
  },
  async delete(url, params) {
    try {
      const res = await axios.delete(url, { params });
      return typeof res.data !== 'undefined' && res.data;
    } catch (err) {
      return checkCode(err.message);
    }
  },
  async all(url, params) {
    try {
      const res = await axios.all(url, { params });
      return typeof res.data !== 'undefined' && res.data;
    } catch (err) {
      return checkCode(err.message);
    }
  },
};

3. 本地調試設置跨域

使用proxy代理設置跨域，查看詳情

// vite.config.js
export default {
  resolve: {
    proxy: {
      '/api': {
        target: 'https://xxx.com/api',
        changeOrigin: true,
      },
    },
  },
}

4. 使用

// about/api/index.js
import $api from '@/utils/request';

export default {
  getData(params) {
    return $api.get('/api/basis/Data',params);
  },
};

// about/index.vue
<template>
  <div>about</div>
</template>

<script>
import aboutApi from './api';

export default {
  setup() {
    const test = async () => {
      const result = await aboutApi.getData();
      console.log('result: ', result);
    };
    test();
  },
};
</script>

<style></style>

其他功能正在開發，敬請期待！！！