Vue Cli3.0 и Alifeibing для исследования инструментов визуального построения

внешний интерфейс Командная строка Vue.js React.js

Инструмент визуального построения Vue Cli3.0 — Vue UI

1. Среда установки

Установлен последний Vue CLI. Откройте Терминал и введите:npm install -g @vue/cli or yarn global add @vue/cli

Используйте -V, чтобы увидеть только что установленную версию:vue -V 3.0.0-rc.10

После обновления vue-cli метод сборки предыдущей версии 2.0 недоступен нужно скачать заново

yarn global add @vue/cli-init

Инициализация Vue UI, в чистой директории введите:

vue ui

Эта команда автоматически открывает браузер и отображает следующий интерфейс

2. Добавьте элементы

Есть два способа добавить новый элемент

1. Визуальное дополнение

Визуально добавить

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

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

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

2. Добавить в командную строку

vue create <project-name>

? Please pick a preset: (Use arrow keys)
❯ my-test (vue-router, vuex, sass, babel, eslint)
  default (babel, eslint)
  Manually select features
  
? Check the features needed for your project: (Press <space> to select, <a> to t
oggle all, <i> to invert selection)
❯◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing
 
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): SCSS/SASS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
 ? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In packag
e.json
? Save this as a preset for future projects? (y/N) n

Нажмите пробел, чтобы выбрать

Vue CLI v3.0.0-rc.10
✨  Creating project in /Users/zjy/ttt.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

yarn install v1.0.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
⠐ @babel/highlight@7.0.0-beta.47

Начать сборку проекта

В-третьих, инструмент анализа

1. Плагины

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

2. Зависимость

Чтобы просмотреть ресурсы, от которых зависит проект, вы можете напрямую просмотреть соответствующий официальный веб-сайт или исходный код.

3. Конфигурация

Проект можно настроить, а параметры конфигурации будут в vue.config.js

4. Задачи

Можно отлаживать локально, упаковывать,

Выполнять анализ эффективности проектов

Четыре, анализ структуры проекта Vue Cli3

Папок намного меньше, а структура каталогов понятнее, сборка и конфиг в vue-cli2.0 объединены в vue.config.js Удалена статическая папка, добавлена ​​общая Папка представлений добавляется в Src для хранения компонентов представления, а компоненты используются для хранения общедоступных компонентов.

1.vue.config.js конфигурация

Справочная документация:документ конфигурации

module.exports = {
 baseUrl: '/',
 outputDir: 'dist',
 lintOnSave: true,
 compiler: false,
 // 调整内部的 webpack 配置。
 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // 配置 webpack-dev-server 行为。
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | Object
  before: app => {}
 }
 ....
}

Али Фейбинг

Летающий лед:Официальный сайт

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

enter image description here
enter image description here

Выберите шаблон и создайте новый проект

enter image description here
enter image description here
enter image description here
Созданный каталог проекта
enter image description here

Локальная отладка:

enter image description here

Добавить компоненты на страницу

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

каталог проекта

enter image description here

Импорт существующего проекта

Настройки адаптации проекта:Документация

Существующие проекты, связанные с Iceworks

Для подключения существующего проекта к Icewokrs необходимо добавить в описание проекта соответствующую информацию

  1. Описывает предмет, распознаваемый Iceworks. Добавление слова ice-scaffold в поле ключевых слов файла package.json указывает на то, что это шаблонный проект, который адаптируется к спецификации льда.
{
  "name": "my-project",
  "keywords": ["ice-scaffold"],
  // ...
}
  1. Опишите язык фреймворка, используемый в проекте.

Файл package.json добавляет объект поля scaffoldConfig, пример выглядит следующим образом:

{
  // ...
  "scaffoldConfig": {
    "type": "react",
    "name": "ice-design-pro",
    "title": "ICE Design Pro",
    "screenshot": "https://img.alicdn.com/tfs/TB1_bulmpOWBuNjy0FiXXXFxVXa-1920-1080.png"
  }
}

Поле scaffoldConfig.type описывает имя фреймворка react vue angular, используемое текущим проектом и т. д. Это поле используется для сопоставления с источником материала.

  1. В package.json есть исполняемая команда npm run start npm run build

Эти две команды используются для запуска службы отладки и построения функции проекта.Вы можете использовать свои собственные инструменты командной строки.

{
  "scripts": {
    "start": "custom-cli start",
    "build": "custom-cli build"
  }
}

Эпилог

Vue Cli 3.0 предназначен для визуального построения проектов vue.Alifeibing нацелен на три основных фреймворка, но поддерживает наиболее чувствительные материалы, а также поддерживает пользовательские материалы для строительства. Тем не менее, продукт в настоящее время находится на ранней стадии и имеет много недостатков.Например, частота отказов зависимостей загрузки проекта высока, каталог импортированных страниц проекта должен быть страницами, а каталог скомпилированных файлов должен быть собран, иначе программное обеспечение не может быть распознаются и отображаются. Эти проблемы должны решаться постепенно по мере дальнейшей оптимизации программного обеспечения. Для команд с собственными фиксированными шаблонами фреймворка рассмотрите возможность использования такого зрелого набора инструментов для быстрого создания проектов.

Широкая реклама

Эта статья была опубликована вЕженедельный выпуск Mint Front End, Добро пожаловать в Watch & Star ★, пожалуйста, указывайте источник при перепечатке.

Добро пожаловать, чтобы обсудить, поставить лайк и перейти ｡◕‿◕｡～

Категории