"Front-end Engineering" - строительный проект Vue CLI3, реальная боевая эксплуатация

Vue.js
"Front-end Engineering" - строительный проект Vue CLI3, реальная боевая эксплуатация

Недавно у компании появился новый проект.Предыдущий проект Vue был построен с помощью Vue CLI2, а теперь он будет построен с помощью Vue CLI3.Я хотел бы записать реальный боевой процесс в этой статье.Если вы считаете, что эта статья полезно для вас, пожалуйста, как это. Спасибо. Продолжаем обновлять......

1. Установите Vue CLI3

  • Сначала вам нужно удалить Vue CLI2 с помощью командыnpm uninstall vue-cli -gудалить;
  • введите командуnpm install -g @vue/cliУстановите Vue CLI3;
  • После завершения установки введите командуvue --version, проверьте, выше ли номер версии Vue CLI 3.0, что означает, что установка прошла успешно.

Во-вторых, создайте проект Vue.

  • Создайте новую папку, обратите внимание, что имя файла лучше не использовать на китайском языке, действуйте, как показано ниже;

  • введите командуvue create flow_manage_platform,flow_manage_platformимя проекта;
  • Нажимайте клавиши вверх и вниз, чтобы выбрать пункт Ручной выбор функций (выбрать функции вручную), по умолчанию (babel, eslint) (установка по умолчанию);

  • Нажимайте клавиши вверх и вниз, а также клавишу ввода, чтобы выбрать функцию для установки;

  • Используйте режим истории маршрутизатора, нажмите Enter, чтобы перейти к следующему шагу;

  • Выберите язык предварительной обработки CSS, выберите меньше и нажмите Enter, чтобы перейти к следующему шагу;

  • Выберите в выделенных файлах конфигурации и настройте Babel, PostCSS и т. Д. Независимо от файла package.json;

  • Сохранять ли конфигурацию установки, нажмите Enter, чтобы перейти к следующему шагу;

  • Если появится следующее изображение, пора начинать загрузку проекта Vue;

  • Если загрузка идет очень медленно, это проблема с сетью, вы можете подключить компьютер к мобильной сети;

3. Очистите проект Vue

В проекте Vue, построенном через Vue CLI, много бесполезных файлов и кода, который нужно один раз почистить.

1. Инициализация

  1. После завершения загрузки сначала открыть Package.json файл,
    "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
},
    изменить на
    "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build"
},
    Поскольку в Vue CLI2 используетсяnpm run devкоманда для запуска проекта.
  2. использоватьnpm installУстановите зависимости, после успешной установки выполнитеnpm run dev, открыть в браузере после успешного выполненияhttp://localhost:8080/, страница отображается, как показано на рисунке ниже, что указывает на то, что проект Vue был успешно построен.

2. Очистите файл index.html в общедоступном файле.

После очистки следующим образом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</head>
<body>
    <div id="app"></div>
</body>
</html>

3. Очистите файл router.js

После очистки следующим образом:

import Vue from 'vue'
import Router from 'vue-router';
Vue.use(Router)

function load(component) {
    return resolve => require([`./views/${component}`], resolve);
}

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: load('home')
        },
    ]
})

4. Очистите файл App.vue

После очистки следующим образом:

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

5. Очистите папку представлений

Удалите файлы About.vue и Home.vue в папке представлений,

Создайте новый файл home.vue.Содержимое выглядит следующим образом:

<template>
    <div>
        欢迎使用Vue项目
    </div>
</template>

6. Очистите папку компонентов

Удалите файл HelloWorld.vue в папке компонентов.

7. Очистите папку активов

Удалите текст logo.png в папке с ресурсами.

8. После очистки

сделай это сноваnpm run dev, открыть в браузере после успешного выполненияhttp://localhost:8080/, страница отображается, как показано на рисунке ниже, что указывает на то, что проект Vue был успешно очищен.

В-четвертых, настройте проект Vue.

После очистки он все еще не соответствует требованиям разработки нашего проекта, и нам нужно его настроить дальше.

1. Создайте новую папку API

Создайте новую папку API в папке src, в основном поместив файл конфигурации axios axios.js и файлы интерфейса.

2. Создайте новую папку миксинов

Создайте новую папку миксинов в папке src, в основном для размещения файлов миксинов Vue.

В папке minxins создайте новый файл index.js, в основном для глобального размещения смешанного содержимого.

export default {
    data() {
    	return {
    	}
    },
    created(){
        alert('全局混乱引入成功')
    },
    methods: {
    }
}

Ввести глобальные миксины в main.js,

import mixins from './mixins';
Vue.mixin(mixins);

Вы можете увидеть всплывающее окно на странице браузера全局混乱引入成功указывая на то, что введение прошло успешно,

Назад minxins / index.js файлы

created(){
    alert('全局混乱引入成功')
},

удалять!

3. Создайте новую служебную папку

Создайте новую папку службы в папке src, в основном размещая общедоступные методы и файлы конфигурации.

4. Настройте папку активов

  1. Создайте новую папку css в папке с ресурсами, в основном для размещения файлов стилей;
  2. Создайте новую папку с изображениями в папке с ресурсами, в основном для размещения файлов изображений, которые можно скомпилировать.

5, новый папка маршрутизатора

Создайте новую папку маршрутизатора в папке src,

Удалите файл router.js в папке src,

В папке маршрутизатора создайте новые файлы index.js и route.js,

Содержимое index.js:

import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes';
Vue.use(Router);

// 路由配置
const router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
   routes,
   scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
         return savedPosition;
      } else {
         return {x: 0, y: 0};
      }
   }
});

router.beforeEach((to, from, next) => {
   next();
});

router.afterEach((to, from, next) => {
   window.scrollTo(0, 0);
});

export default router;

содержимое route.js:

function load(component) {
    return resolve => require([`views/${component}`], resolve);
}

const routes = [
    {
        path: '/',
        name: 'home',
        component: load('home'),
        meta: {
            title: '首页'
        }
    },
    {
        path: '*',
        redirect: {
            path: '/'
        }
    }
];
export default routes;

6. Создайте новую папку магазина

Создайте новую папку хранилища под папкой SRC и поместите содержимое VEUEX,

Удалите файл store.js в папке src,

Создайте новую папку модуля в папке магазина,

Создайте новый файл demo.js в папке модуля,

const state = {
    moduleTip: '欢迎使用Vuex模块',
};

const getters = {
    moduleTip: state => state.moduleTip,
};

const mutations = {
    SET_MODULETIP(state, data) {
        state.moduleTip = data;
    },
};

const actions = {};

export default {
    state,
    getters,
    mutations,
    actions
}

Создайте новый файл index.js в папке магазина,

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production';

import demo from './module/demo';
const store = new Vuex.Store({
    strict: debug,
    state: {
        tip: '欢迎使用Vuex',
    },
    getters: {
        tip: state => state.tip,
    },
    mutations: {
        SET_TIP(state, data) {
            state.tip = data;
        },
    },
    actions: {

    },
    modules: {
        demo,
    }
});

export default store;

Запишите в файл minxins/index.js,

import { mapGetters } from 'vuex';
export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapGetters(['tip','moduleTip'])
    },
    mounted(){
    },
    methods: {
    }
}

Напишите в файле views/home.vue,

<template>
    <div>
        欢迎使用Vue项目
        {{tip}}
        {{moduleTip}}
    </div>
</template>

Отображать на странице браузера:

欢迎使用Vue项目 欢迎使用Vuex 欢迎使用Vuex模块

Это указывает на то, что глобальный Vuex и модуль Vuex настроены успешно.

7. Псевдоним файла конфигурации

В Vue CLI3 конфигурация веб-пакета проекта заключается в создании нового файла vue.config.js в корневом каталоге для настройки.

Настройте содержимое в файле vue.config.js следующим образом:

const path = require('path');
function resolve(dir) {
    return path.resolve(__dirname, dir)
}
module.exports = {
    configureWebpack: {
        resolve: {
            extensions: ['.js', '.vue', '.json'],
            alias: {
                '@': resolve('src'),
                'assets': resolve('src/assets'),
                'css':resolve('src/assets/css'),
                'images':resolve('src/assets/images'),
                'views': resolve('src/views'),
                'components':resolve('src/components'),
                'api':resolve('src/api'),
                'mixins':resolve('src/mixins'),
                'store': resolve('src/store'),
                'service':resolve('src/service'),
            }
        }
    },
}

8. Закройте исходную карту

Закрытие исходной карты имеет два преимущества

  1. Сокращение времени упаковки и компиляции;
  2. Старайтесь не видеть исходный код в Sources с работающими инструментами разработчика F12.

Настройте содержимое в файле vue.config.js следующим образом:

module.exports = {
    productionSourceMap: false,
}

9. Настройте элемент devServer

  1. фиксированный порт

    Иногда задняя часть устанавливает междоменный белый список для фиксации порта, а передняя часть должна взаимодействовать с фиксированным портом.port: 8036,

  2. Открыть горячее обновление

    hot: true,

  3. исправлен открытый браузер

    open: 'Google Chrome',

Настройте содержимое в файле vue.config.js следующим образом:

module.exports = {
    devServer:{
        port: 8036,
        hot: true,
        open: 'Google Chrome'
    }
}

В-четвертых, сброс стиля CSS

Создайте новый файл base.less в папке src/assets/css,

Содержимое файла следующее:base.less

Записать в файл main.js

import 'css/base/base.less';

5. Представьте библиотеку компонентов Element-Ui

  1. Установить зависимости

    воплощать в жизньnpm i element-ui -saveЗаказ

  2. стиль импорта

    в main.jsnew VueВставьте следующий код перед

    import 'element-ui/lib/theme-chalk/index.css';

  3. Полное введение библиотеки компонентов Element-Ui (выберите один из двух)

    Если большинство компонентов Element-Ui в проекте приходится использовать, рекомендуется внедрение полного

    в main.jsnew VueВставьте следующий код перед

    import ElementUI from 'element-ui';
Vue.use(ElementUI);

  4. Представить библиотеку компонентов Element-Ui по запросу (выберите один из двух)

    Возьмем в качестве примера введение компонента Button.

    • в main.jsnew VueВставьте следующий код перед

      //注册element-ui组件
import {
    Button,
} from 'element-ui';

const components = [
    Button,
];
for (let k of components) {
    Vue.use(k);
}

    • Запишите в файл src/views/home.vue

      <template>
    <div>
        欢迎使用Vue项目
        {{tip}}
        {{moduleTip}}
        <el-button>饿了吗Button组件</el-button>
    </div>
</template>

    • Если на странице браузера появляется следующая картинка, это означает, что импорт по запросу прошел успешно

5. Настройка тем (пакетное изменение стиля компонентов элементов)

  • Поскольку стиль элемента написан на sass, необходимо сначала установить плагины sass и sass-loader, выполнитьnpm i sass sass-loader -DЗаказ;

  • В папке src/assets/css/base создайте новые element_theme.scss и element_var.scss (различные переменные для стилей темы);

  • написать в main.jsimport 'css/base/element_theme.scss';

  • Запишите в файл src/views/home.vue

    <template>
    <div>
        欢迎使用Vue项目
        {{tip}}
        {{moduleTip}}
        <el-button type="primary">饿了吗Button组件</el-button>
    </div>
</template>

  • Нажмите F12, чтобы открыть инструменты разработчика, элемент проверки может видеть показанную рисунку

  • Поиск в файле element_var.scss#4574d0, как показано на рисунке ниже, замените его на$--color-primary: red !default;

  • Отображение страницы браузера показано на рисунке ниже, то есть пользовательская тема выполнена успешно.

Шестое, установите библиотеку Jquery Js.

Хотя Vue манипулирует DOM с помощью data. Но в некоторых случаях удобнее использовать Jquery, например, для получения высоты элемента и динамического изменения высоты таблицы, чтобы зафиксировать голову.

  • Выполнение заказаnpm i Jquery -save
  • Новый код Vue.config.js Файл:
    const webpack = require('webpack');
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $:"jquery",
                jQuery:"jquery",
                "windows.jQuery":"jquery"
            })
        ]
    },
}
  • Добавьте код в файл main.js:
    import $ from 'jquery';
  • Добавьте код в файл src/views/home.vue для проверки:
      <template>
      <div class="p-wrap">
          欢迎使用Vue项目
          {{tip}}
          {{moduleTip}}
          <el-button type="primary">饿了吗Button组件</el-button>
      </div>
  </template>
  <script>
  export default {
      mounted(){
           $(".p-wrap").click(function(){
              alert('Jquery安装成功')
          });
      }
  }
  </script>
  • Щелкните текстовую часть страницы браузера, чтобы открыть всплывающее окно «Jquery успешно установлено», указывающее, что библиотека Jquery Js была успешно установлена.

Семь, о яме менее грузчика

Когда версия, соответствующая less-loader, равна 4.1.0, версия, установленная с less, должна быть 2.7.3, иначе она появится

ERROR in ./src/home/index.less
(./node_modules/_css-loader@1.0.0@css-loader!./
node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js!./src/home/index.less)
Module build failed (from ./node_modules/_less-loader@4.1.0@less-loader/dist/cjs.js):

сообщить об ошибке

Восемь, установите плагин js-cookie

  • Этот подключаемый модуль в основном используется для хранения, получения и удаления файлов cookie браузера. Наиболее часто используется для хранения токена, возвращаемого серверной частью после успешного входа в систему.
  • Выполнение заказаnpm i js-cookie --save
  • Создайте новый файл cookie.js в файле src/service и запишите его в файл
    import Cookies from 'js-cookie';
const TokenKey = 'token';
export function getToken() {
   return Cookies.get(TokenKey);
}
export function setToken(token, time) {
   return Cookies.set(TokenKey, token, {
      expires: time,
      path: '/'
   });
}
export function removeToken() {
   return Cookies.remove(TokenKey);
}

Девять, настроить axios

  • Выполнение заказаnpm i axios -save

  • Создайте новый файл axios.js в папке src/api.

  • Настройте аксиомы в axios.js

    • Создайте новый экземпляр axios,axios.create([config]),

      Основная конфигурация

      timeoutУказывает количество миллисекунд, по истечении которого запрос истечет (0 означает отсутствие тайм-аута)

      headersПользовательский заголовок запроса, эта часть конфигурации должна быть согласована с бэкендом, иначе бэкэнд не получит ваши параметры

      baseURLНастройте адрес запроса бэкенда, который будет автоматически добавлен вurlфронт, сделатьurlДоступные относительные адреса

      import axios from 'axios';
const service = axios.create({
    timeout: 60000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        "X-Requested-With": "XMLHttpRequest",
    },
    baseURL: 'xxx',
});

      В приведенной выше конфигурации формат данных, передаваемый от внешнего интерфейса к внутреннему, — это формат формы или формат JSON, например:

      //Form格式
let data = new URLSearchParams();
data.append("page", currentPage);
//JSON格式
let obj = new Object;
obj.page=currentPage;

      Если серверная часть использует JAVA, обычно используйте формат формы.

      Но когда вы хотите передать бинарные данные на сервер, вам нужно использовать формат FormData, например:

      let data = new FormData();
data.append("page", currentPage);

      Затем также создайте новый экземпляр axios

      const serviceForm = axios.create({
    timeout: 60000,
    headers: {
        'Content-Type': 'multipart/form-data; charset=UTF-8',
        "X-Requested-With": "XMLHttpRequest",
    },
    baseURL: 'xxx',
});

    • Настроить перехватчик HTTP-запросов

      Перехватывать запросы до того, как они будут обработаны, или поймать

      axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

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

      import { getToken } from 'service/cookie';

//http request 拦截器 在发送请求之前做些什么
let request = function (config) {
    const token = getToken();
    if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.token = token;
    }
    return config;
};

      надconfig.headers.tokenТокен — это параметр, который серверная часть сообщает для добавления токена в заголовок, и серверная часть также должна настроить заголовки, чтобы разрешить параметр с токеном, в противном случае это вызовет междоменное обращение.

      Перехват при записи очередной ошибки запроса

      //http request 拦截器 在请求错误时做些什么
let request_err = function (err) {
    return Promise.reject(err);
};

      Используйте эти перехватчики запросов для каждого экземпляра

      service.interceptors.request.use(request, request_err);
serviceForm.interceptors.request.use(request, request_err);

    • Настроить перехватчик ответа http

      Перехватывать ответы до того, как они будут обработаны, или поймать .

      // 添加响应拦截器
axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });

      В общих проектах возвращаемые данные предварительно обрабатываются здесь, а сообщения об ошибках обрабатываются пакетами, аналогично подсказкам.

      Перехватить обработку до того, как ответ успешен

      import { Message } from 'element-ui';

let response = function (res) {
    const data = res.data;
    const message = `${data.code}--${data.msg}` || '未知错误'
    if (res.status == 200) {
        if (data.code == 200) {
            return data;
        } else {
            Message({
                message: message,
                type: 'error',
            })
        }
    }
};

      надdata.code,data.msgВсе это согласовывается с серверной частью

      Обработка перехвата до отказа ответа

      let response_err = function (err) {
    if (err.response) {
        const data = err.response.data;
        const message = `${data.code}--${data.msg}` || '未知错误'
        Message({
            message: message,
            type: 'error',
        })
    }
    return Promise.reject(err);
};

      Используйте эти перехватчики ответов для каждого экземпляра

      service.interceptors.response.use(response, response_err);
serviceForm.interceptors.response.use(response, response_err);

      Наконец, два экземпляра axios доступны для внешнего мира.

      Есть два способа

      Один из них — повесить прямо под объектом окна, чтобы можно было использовать service и serviceForm непосредственно в других файлах.

      window.service = service;
window.serviceForm = serviceForm;

      Один из них - экспортировать с помощью экспорта, поэтому вам нужно сначала записать его в другие файлы.import {service,serviceForm} from 'api/axios'

      export {service,serviceForm}

    • Внесите файл конфигурации axios в файл main.js.

      import 'api/axios'

    • Создайте новый файл demo.js в папке src/api и напишите в нем запрос с параметрами post, get и get.

      /* get请求 */
export function get() {
    return service.get('api/get');
}
/* get请求带参数 */
export function get2(data) {
	return service.get('api/get2', {
		params: data
    });
}
/* post请求带参数 */
export function post(data) {
	return service.post('api/post', data);
}

    • Использовать в src/views/home.vue

      import * as API from 'api/demo';
export default {
    methods: {
        get() {
            API.get().then(res => {
            }).catch(err => {
            })
        },
        get2() {
            let data =new URLSearchParams;
            data.append('param',1)
            API.get2(data).then(res => {
            }).catch(err => {
            })
        },
        post() {
            let data =new URLSearchParams;
            data.append('param',1)
            API.post(data).then(res => {
            }).catch(err => {
            })
        }
    }
}

наконец

прикреплятьадрес проекта

Категории