Краткое изложение разработки Vue и некоторые рекомендации (обновлено)

Vue.js

Базовая среда разработки

Проект, созданный vue-cli3, vscode как инструмент для написания кода Рекомендация плагина vscode:настройка плагина vscode

Каталог статей

  1. Введение в структуру каталогов проекта
  2. Выбор рамки пользовательского интерфейса
  3. основная, js обработка
  4. axios запрашивает вторичную инкапсуляцию

1. Введение в структуру каталогов проекта

├── public // index.html
├── src // 业务相关
│ ├── assets // 静态文件(css, images)
│ ├── components // 全局组件
│ ├── layouts // 基础样式布局
│ ├── plugin // 样式及工具引入
│ ├── request // 请求配置
│ ├── router // 路由
│ ├── store // 全局状态管理
│ ├── utils // 工具文件
│ ├── app.vue // 入口文件
│ ├── main.js // 主要配置文件
│ └── views // 页面
├── .eslintrc.js // eslint 检查配置
├── .env.release // 测试环境变量
├── .env.pre-build // 预发环境变量
└── vue.config.js // webpack 打包配置

2. Выбор рамки пользовательского интерфейса

Проверка и сравнение по элементу выбора фреймворка, iview, ant-design-vue Наконец выберите ant-design-vue, порталv UE.Anta.design/docs/v UE/in…

преимущество:
  1. Приятно
  2. Документация понятна
  3. Простота в использовании, наглядные примеры
  4. Меньше ошибок, плавное использование компонентов
  5. Хорошая производительность, есть тест на один случай

3. Main.js децентрализованная обработка

main.jsВ качестве операционной записи нужно ввести много вещей, слишком большой код, необходимость оптимизации, логика ясна, а Wen Tiger удобен.

1. Работа с трехсторонними структурами

Создайте новый плагин папки для хранения всех файлов, которые необходимо импортировать.main.jsСмонтированные компоненты, методы, сторонние библиотеки

  1. ant-design.jsСогласно официальной рекомендации, вводить по требованиюпреимущество:Наш проект разработки может использовать не все компоненты, поэтому введение уменьшает размер проекта.

    import Vue from 'vue'
import {
  ConfigProvider,
  Pagination,
  Steps,
  Cascader,
  Row,
  Col,
  Table
} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(ConfigProvider)
Vue.use(Steps)
Vue.use(Cascader)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)

  2. func.jsНекоторые пользовательские методы, связанные с прототипом vue

    import Vue from 'vue'
import api from '@/request/api'
import { isInvalid, isValid } from '@/utils/verify'
// 请求接口
Vue.prototype.$api = api
// 验证工具
Vue.prototype.$isInvalid = isInvalid
Vue.prototype.$isValid = isValid

    Таким образом разложите несколько файлов, а затем сведите их в единыйindex.jsсередина

    import './ant-design.js'
import './func.js'
import './moment'

    Вставил наконец main.js, весь мир понятен и простimport './plugin'

    2. Внедряйте пользовательские компоненты по всему миру

    Я получил напоминание от великого бога в области комментариев и изучил его.webpackсерединаrequire.context

    require.contextдаwebpack, используемый для создания собственного (модульного) контекста

    webpackбудет анализировать код во время сборкиrequire.context()

    require.context(directory, useSubdirectories = false, regExp = /^/)Функция принимает три параметра:

    Каталог папок для поиска Должен ли он также искать его подкаталоги и регулярное выражение, которое соответствует файлам

    // 语法
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
// 示例
require.context('./test', false, /\.test\.js$/);

    Итак, вmain.js, я могу зарегистрировать все свои пользовательские компоненты напрямую, очень просто

    // 自定义组件
const requireComponents = require.context('@v/components', true, /\.vue$/)
// 打印结果
// 遍历出每个组件的路径
requireComponents.keys().map(fileName => {
  // 获取组件配置
  const componentConfig = requireComponents(fileName)
  // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
  const componentName = fileName.replace(/^\.\//, '').replace(/\.vue$/, '')
  // 全局注册组件
  Vue.component(
    componentName.replace(/\//, '-'),
    // 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

4. Axios запрашивает вторичную инкапсуляцию

Axios, но подробнее о галантерейных товарах

  1. Новые файловые аксиомы

  2. перехватчик запросов Измените заголовок запроса и период ожидания в соответствии с потребностями вашего бизнеса.

    import axios from 'axios'
axios.interceptors.request.use(
  config => {
    // 判断是否是提交文件，还是常规请求
    if (config.data instanceof FormData) {
      config.headers = {
        'Content-Type': 'multipart/form-data' // 此处格式自定义
      }
    } else {
      config.data = JSON.stringify(config.data)
      config.headers = {
        'Content-Type': 'application/json', // 此处格式自定义
        token: getLocalStorage('token')
      }
    }
    config.withCredentials = true
    config.timeout = 5000    // 超时时间
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

  3. перехватчик ответа В соответствии с данными, возвращенными из фона, выполните некоторую унифицированную обработку

    // 添加响应拦截器
axios.interceptors.response.use(
  res => {
    let data = res.data
    if (res.statusCode !== 200) {
      if (data.failureReason === 4011 || data.failureReason === 4012) {
        console.log('需要重新登录')
      }
    } else {
      if (data.resultStates === 0) {
        return data
      } else {
        return Promise.reject(data)
      }
    }
  },
  error => {
    notification['error']({
      message: '提示',
      duration: 2,
      description: '后台报错'
    })
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

  4. Инкапсулируйте получение, отправку и экспорт

    export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(response => {
        if (response.success) {
          resolve(response.data)
        }
      })
      .catch(err => {
        reject(err)
      })
  })
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      response => {
        if (response.success) {
          resolve(response.data)
        }
      },
      err => {
        reject(err)
      }
    )
  })
}

  5. Фокус: создать новый файл api.js Напишите здесь все интерфейсы фоновых запросов для унифицированного управления

    import { get, post } from './axios'
const api = {
     reqLogin: p => post('api/user/addFormId', p),
      reqGetInfo: p => post('api/user/addFormId', p)
}
export default api

// 将 api 引入到 main.js 中
Vue.prototype.$api = api

// 这样页面中使用
this.$api.reqLogin().then(res => {
      console.log(res)
})

Это очень удобно? хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп, хлоп...

Группа веб-интерфейса набирает группу молодых людей с мечтамиwoohoo.brief.com/afraid/33 или 1 из 26…

Категории