Веб-приложение, построенное на vue-cli4.

Vue.js
Веб-приложение, построенное на vue-cli4.

написать впереди

отvue-cli3Начинать,vue-cliИнструменты скаффолдинга совершили большой скачок, привнеся новый опыт разработки, простую схему конфигурации и даже работу с визуальным интерфейсом.Эта волна действительно Tianxiu!

在这里插入图片描述

В частности, есть в основном следующие улучшения опыта: 1. Создайте проект

  • vue create hello-world
  • Работа интерфейса пользовательского интерфейсаvue ui

2. Параметры конфигурации при создании проекта можно сохранить какpresetдокумент.

  • Сохраненоpresethome.vuercизJSONв файле.如果你想要修改被保存的preset
  • Во время создания проекта вам также будет предложено выбратьpreset

3. Плагиныvue-cliИспользование набора архитектуры на основе подключаемых модулей, которая является старойvue-cliимеютбольшая разница.

старая версияvue-cliБыть в структуре проекта,webpackКонфигурация, внедрение сторонних функций/плагинов, если есть какие-либо изменения, нет другого пути, кроме как сделать это самостоятельно; новая версияvue-cliЭто другое. Вы можете писать свои собственные плагины, создавать различные функции и искать плагины других людей для использования. Это действительно гладко.

4. конфигурация веб-пакета представилwebpack-chain, мы можем использовать цепочкуapiмодифицироватьwebpackконфигурация.

5. Переменные среды и режимы По умолчанию есть одинvue.config.jsфайл конфигурации, извлеченный из предыдущегоconfigconfig в папке и представилмодельэто понятие.

Введение в проект

map-chartechartsОн поддерживает динамическую маршрутизацию, смоделированные данные, расширенный поиск, карты, статистику данных и многие другие функции.

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

Предварительная онлайн-версия: мобильный быстрый доступ

онлайн опыт:git.io/JeMCZ

Исходный код:GitHub.com/никогда и /ass...

исходный код

GitHub.com/никогда с/лестно…

разработка и использование

1. После загрузки кода вы можете ввести проект в визуальный интерфейс Vue UI для работы.В строке меню слева вы можете выполнить ряд зависимостей установки, запуск проектов, настройку проекта и т. д.

在这里插入图片描述

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

"scripts": {
    "start": "npm run serve",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "nofix": "vue-cli-service lint --no-fix",
    "new": "plop"
}

plop

оnpm run newОписание команд

Когда мы создаем новый в редакторе.vueфайл, по умолчанию он пустой. нам нужно создать<template>,</script>,<style>эти ярлыки.

Так вот, в этом проекте, на основеplopviewилиcomponent

npm run new

Если вы считаете, что конфигурация слишком сложна, я рекомендую вам установить что-то вродеVue 2 Snippets VS Codeплагин. Такой фрагмент кода может значительно повысить эффективность разработки в обычной работе.

развертывать

Развертывание этого проекта простое, во-первых, вам может понадобитьсяvue.config.jsсерединаpublicPathПоля вносят некоторые изменения, чтобы приспособиться к нужной среде развертывания; затем используйтеnpm run buildдля создания файлов внешнего интерфейса, а затем разверните файлы на своем сервере.

напиши в конце

моя домашняя страница:neveryu.github.io/index.html

Группа QQ:685486827

Категории