проект строительных лесов vue-cli и упаковка Axios

Vue.js

1. Установите среду узла

Работа Vue основана на среде узла.Перед сборкой среды Vue необходимо убедиться, что среда узла успешно установлена.

существуетофициальный сайт node.jsСкачайте инсталляционный пакет и установите его сдуру.

После установки node.js он уже поставляется с npm (инструментом управления пакетами), и нет необходимости устанавливать npm отдельно.

Введите команду в терминал, чтобы проверить, прошла ли установка успешно.Если выводится номер версии, это означает, что мы успешно установили среду узла.

​

Во-вторых, установите зеркало Taobao cnpm.

Сервера npm чужие, поэтому иногда мы устанавливаем «модули» очень медленно. Зеркало Taobao синхронизирует модули в npm с внутренним сервером, что сокращает время установки модулей. После установки образа Taobao можно использовать как командные строки cnpm, так и npm, и они не конфликтуют.

Откройте командную строку и введите команду для установки cnpm.

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

3. Установите веб-пакет

npm install webpack -g

В-четвертых, установите инструмент сборки строительных лесов vue-cli.

Глобальная установка, ввод командной строки

npm install -g vue-cli

Введите vue -V в командной строке, чтобы просмотреть номер версии.Если номер версии отображается, установка выполнена успешно.

​

Пять, проект сборки vue-cli

Перейдите в каталог вашего проекта и создайте новый проект на основе шаблона веб-пакета: vue init имя проекта веб-пакета

vue init webpack demo

Где демо — это имя проекта, вы можете определить имя в соответствии с вашим собственным проектом, после нажатия клавиши «Ввод» после загрузки шаблона вы войдете в ряд проблем с конфигурацией.

​

проиллюстрировать:

  • Название проекта: Название проекта
  • Описание проекта: Описание проекта
  • Автор: автор
  • Сборка Vue: метод упаковки (автономный и во время выполнения), нажмите Enter, чтобы выбрать вариант по умолчанию.
  • Установить vue-router?: Установить маршрутизацию? Его нужно использовать, нажмите y, чтобы ввести
  • Использовать ESLint для проверки кода? Включены ли правила обнаружения кода eslint? В настоящее время не требуется, нажмите n, чтобы ввести
  • Настройка модульных тестов с помощью Karma + Mocha?: Модульное тестирование? В настоящее время не требуется, нажмите n, чтобы ввести
  • Настроить тесты e2e с помощью Nightwatch?: Сквозное тестирование? В настоящее время не требуется, нажмите n, чтобы ввести

После завершения настройки мы увидим наш демонстрационный файл проекта в каталоге нашего проекта, мы можем найти терминал для текущего проекта и ввести следующую командную строку в командной строке, проект запускается успешно. Введите localhost:8080 в адресную строку браузера, чтобы получить доступ к проекту.

npm run dev

Шесть, введение в каталог проектов vue

​

1. build: каталог сборки скрипта

1) build.js ==> сценарий сборки производственной среды;

2) check-versions.js ==> Проверить версию npm, node.js;

3) utils.js ==> сборка связанных методов инструмента;

4) vue-loader.conf.js ==> Настроен загрузчик css и автоматически добавляется префикс после компиляции css;

5) webpack.base.conf.js ==> базовая конфигурация webpack;

6) webpack.dev.conf.js ==> конфигурация среды разработки webpack;

7) webpack.prod.conf.js ==> конфигурация рабочей среды webpack;

2, конфигурация: конфигурация проекта

1) dev.env.js ==> переменные среды разработки;

2) index.js ==> файл конфигурации проекта;

3) prod.env.js ==> переменные производственной среды;

3. node_modules: зависимые от проекта модули, загружаемые npm.

4. src: Вот каталог, который мы хотим разработать, и в основном все, что нужно сделать, находится в этом каталоге. Он содержит несколько каталогов и файлов:

1) активы: каталог ресурсов, поместите несколько изображений или общедоступные js и общедоступные css. Ресурсы здесь будут собраны webpack;

2) компоненты: каталог компонентов, компоненты, которые мы пишем, размещаются в этом каталоге;

3) роутер: front-end маршрутизация, путь маршрутизации, который нам нужно настроить, прописан в index.js;

4) App.vue: корневой компонент;

5) main.js: входной файл js;

5, статический: каталог статических ресурсов, таких как изображения, шрифты и т. д. не будет собран webpack

6, babelrc: параметры компиляции babel

7, editorconfig: формат кода

8, gitignore: конфигурация файла загрузки git, которую необходимо игнорировать

9. postcssrc.js: инструмент для преобразования css

10. index.html: файл входа на главную страницу, вы можете добавить некоторую метаинформацию и т. д.,

11. package.json: файл конфигурации пакета npm, который определяет сценарий npm проекта, зависимые пакеты и другую информацию.

12. README.md: документ описания проекта в формате уценки.

Семь, изменить номер порта порта

Чтобы избежать конфликтов портов, вы также можете изменить порт, открыть файл config/index.js и изменить параметр порта.

​

Восемь, установите фреймворк element-ui.

【1】Установка

npm install element-ui -S

[2] Представлено в файле main.js.

import ElementUI from 'element-ui'

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

Vue.use(ElementUI)

​

Девять, установите sass

【1】Установка

npm install --save-dev css-loader
npm install --save-dev sass-loader
npm install --save-dev style-loader

//sass-loader依赖于node-sass
npm install --save-dev node-sass

【2】Конфигурация

Настройте в папке webpack.base.conf.js

rules:[
    ....
    {
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
    }
]

【3】Тест

Добавьте lang='scss' в тег стиля в компоненте, использующем scss.

Определите переменную цвета фона в файле app.vue и примените ее к стилю css.Фон станет серым, указывая на то, что sass успешно настроен.


10. Настройте локальный прокси

1. Найдите в проекте файл config/index.js для настройки proxyTable.После завершения настройки необходимо перезапустить проект командой npm run dev

    proxyTable: {
      '/api': {           // 配置后台代理
        target: 'http://192.168.37.56:8090',
        secure: false,
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      },
      "/socket": {       // 配置webSocket
        target: 'http://192.168.37.56:8090',
        secure: false,
        pathRewrite: {
          '^/socket': ''
        },
        changeOrigin: true,
        ws: true
      },
    },

проиллюстрировать:

  • цель: IP-адрес доменного имени внутреннего интерфейса, запрошенный локальной тестовой средой.
  • secure: параметры https, которые необходимо настроить
  • pathRewrite: вместо адреса в таргете, например, нужно вызвать интерфейс "http:192.168.37.56:8090/user/add", можно прямо написать как "/api/user/add"
  • changeOrigin: параметры, которые необходимо настроить для междоменных интерфейсов.

2. Подробный анализ параметров конфигурации config/index.js

'use strict'
const path = require('path')

module.exports = {
  // 开发环境
  dev: {
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: '/',  // 编译发布的根目录，可配置为资源服务器域名或CDN域名
    proxyTable: {}, // 配置后台代理
    host: 'localhost', // 运行测试页面的域名ip
    port: 8080,  // 运行测试页面的端口
    autoOpenBrowser: false, // 项目运行时是否自动打开浏览器
    errorOverlay: true, // 浏览器错误提示
    notifyOnErrors: true, // 跨平台错误提示
    poll: false, // 使用文件系统获取文件改动的通知devServer.watchOptions
    devtool: 'cheap-module-eval-source-map', // 增加调试，该属性为原始源代码
    cacheBusting: true, // 使缓存失效
    cssSourceMap: true // 代码压缩后bug定位将非常困难，引入SourceMap记录压缩前后的位置信息记录，当产生错误时直接定位到压缩前的位置
  },
  // 生产环境
  build: {
    index: path.resolve(__dirname, '../dist/index.html'), // 编译输入的index.html文件
    assetsRoot: path.resolve(__dirname, '../dist'), // 编译输出的静态资源路径（项目打包时的文件）
    assetsSubDirectory: 'static', // 编译输出的二级目录
    assetsPublicPath: '/', // 编译发布的根目录，可配置为资源服务器域名或CDN域名
    productionSourceMap: true, // 是否开启cssSourceMap
    devtool: '#source-map', // 增加调试，该属性为原始源代码
    productionGzip: false, // 是否开启gzip
    productionGzipExtensions: ['js', 'css'], // 需要使用gzip压缩文件的扩展名
    bundleAnalyzerReport: process.env.npm_config_report // 打包分析
  }
}

Одиннадцать, пакет axios

【1】Установка

npm install axios --save-dev

[2] Создайте новую папку services в каталоге src проекта, а затем создайте в ней новый файл ajax.js и getData.js. Файл ajax.js используется для инкапсуляции наших аксиом, а getData.js используется для унифицированного управления нашим интерфейсом.

​

[3] ajax.js инкапсулирует аксиомы

import axios from "axios";
import store from "@/store";
import { Message } from "element-ui";
let router = import("@/router");

axios.defaults.baseURL = "/api";
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
axios.defaults.headers["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.headers["Cache-Control"] = "no-cache";
axios.defaults.headers["pragma"] = "no-cache";

let source = axios.CancelToken.source();

//请求添加token
axios.interceptors.request.use(request => {
    request.headers["demo-auth"] = store.state.loginInfo ? store.state.loginInfo.userId : ""; // 已将userId保存在store中
    return request;
})

//切换页面取消请求
axios.interceptors.request.use(request => {
    request.cancelToken = source.token;
    return request;
});
router.then(lib => {
    lib.default.beforeEach((to, from, next) => {
        source.cancel()
        source = axios.CancelToken.source();
        next()
    })
})

//登录过期跳转
axios.interceptors.response.use(response => {
    let data = response.data;
    if (
        [10002].includes(data.ret)
    ) {
        router.then(lib => lib.default.push({ name: "login" })); // 跳转到登录页面
        Message.warning(data.msg);
    }
    return response;
})

//返回值解构
axios.interceptors.response.use(response => {
    let data = response.data;
    let isJson = (response.headers["content-type"] || "").includes("json");
    if (isJson) {
        if (data.code === 200) {
            return Promise.resolve({
                data: data.data,
                msg: data.msg,
                code: data.code,
            });
        }
        return Promise.reject(
            data.msg ||
            "网络错误"
        );
    } else {
        return data;
    }
}, err => {
    let isCancel = axios.isCancel(err);
    if (isCancel) {
        return new Promise(() => { });
    }
    return Promise.reject(
        err.response.data &&
        err.response.data.msg ||
        "网络错误"
    );
})

export function post(url, data, otherConfig) {
    return axios.post(url, data, otherConfig);
}

export function get(url, data, otherConfig) {
    return axios.get(url, { params: data, ...otherConfig });
}

[4] Управление интерфейсом getData.js

import { get, post } from "@/services/ajax";

//获取程序配置
export function getConfig() {
    return get("static/config.json", null, { baseURL: "./" });
}

// 查找货物已占用位置
export function queryGoodsLabel(params) {
    return get("/goods/queryGoodsLabel", params);
}

// 更换货物已占用位置
export function switchLabel(params) {
    return post("/goods/switchLabel", params);
}
}

[5] Вызов на странице

import { queryGoodsLabel, switchLabel } from '@/services/getData.js'
export default {
        data() {
            return {}
        },
        methods: {
            changePlace(row) {
                this.params = {
                    id: row.id,
                    customsListNumber: row.customsListNumber,
                }

                // 查找货物已占用位置
                queryGoodsLabel(this.params).then(res => {
                    this.$refs.positionDialog.refill(res.data.split(","), true);
                }).catch(err => {

                })
            },
            change(data) {
                this.params.labels = data.join(',')

                // 更换货物已占用位置
                switchLabel(this.params).then(res => {
                    this.$Message.success('更换位置成功')
                }).catch(err => {
                    this.$Message.error(err)
                })
            }
        },
    }

Статья постоянно обновляется каждую неделю, вы можете искать в WeChat "Особенности интерфейса"Прочтите это в первый раз, ответьте [видео】【книги】 Получите 200 ГБ видеоматериалов и 30 книг в формате PDF.



Категории