1. Установка ионной среды
Ионная разработка зависит от среды Nodejs, поэтому нам нужно установить Nodejs до разработки. Скачать и установить:Вход по гиперссылке виден.
После завершения установки откройте PowerShell и введите команды узел -v и npm -v, чтобы убедиться в успешности установки, и если вернут номер версии, это значит, что всё прошло.
Выполните в командной строке PowerShell:
Это нужно для установки cordova и ionic через менеджер пакетов npm, -g означает глобальную установку, а после глобальной установки можно использовать команды cordova и ionic в любом каталоге PowerShell.
Вы можете столкнуться со следующей ошибкой:
2. Создать ионический проект
Официальный сайт Ionic содержит три шаблона проектов: пустые, вкладки и боковое меню, пожалуйста, обратитесь к:Вход по гиперссылке виден.
Мы создаём приложение с помощью шаблона вкладок, открываем CD PowerShell в каталоге разработки и выполняем:
где myApp — это название нашего проекта
Как показано ниже:
C:\project\android>ionic start myApp tabs
√ Создание каталога .\myApp — готово!
√ Загрузка и извлечение вкладок — завершён!
? Хотели бы вы интегрировать своё новое приложение с Cordova, чтобы нацелиться на нативные iOS и Android? Да
√ Персонализация ionic.config.json и package.json — готово!
> ионные интеграции позволяют Cordova --quiet
√ Скачиваю интеграцию Cordova — готово!
√ Копирование файлов интеграций в проект — готово!
[Хорошо] Добавлена интеграция Cordova!
Установка зависимостей может занять несколько минут.
* IONIC DEVAPP *
Ускорьте разработку с помощью Ionic DevApp — нашего быстрого мобильного приложения для тестирования на устройстве
- Тестирование на iOS и Android без нативных SDK
- LiveReload для мгновенных обновлений стиля и JS
️--> Install DevApp:Вход по гиперссылке виден. <--
> npm i
× Запущенная команда — не удалось!
[ОШИБКА]
>node-sass@4.9.0установить C:\project\android\myApp\node_modules\node-sass
> скрипты узлов/install.js
Скачивание бинарного файла изВход по гиперссылке виден.
Скачивание завершено
Бинарный файл сохранен в C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
Кэширование бинарного файла в C:\Users\itsvse_pc\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-57_binding.node
>uglifyjs-webpack-plugin@0.4.6postinstall C:\project\android\myApp\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
>node-sass@4.9.0postinstall C:\project\android\myApp\node_modules\node-sass
> узловы скриптов/build.js
Бинарный файл найден по адресу C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
Тестирование бинарного режима
Бинарный режим — это нормально
npm ЭЭЭ! путь C:\project\android\myApp\node_modules\fsevents\node_modules
npm ЭЭЭ! код EPERM
npm ЭЭЭ! ЭРРНО-4048
npm ЭЭЭ! Syscall LSTAT
npm ЭЭЭ! Ошибка: EPERM: эксплуатация запрещена, lstat
'C:\project\android\myApp\node_modules\fsevents\node_modules'
npm ЭЭЭ! { Ошибка: EPERM: эксплуатация запрещена, lstat
'C:\project\android\myApp\node_modules\fsevents\node_modules'
npm ЭЭЭ! стек: 'Ошибка: EPERM: операция запрещена, lstat
\'C:\\project\\android\\myApp\\node_modules\\fsevents\\node_modules'',
npm ЭЭЭ! ошибка: -4048,
npm ЭЭЭ! код: 'EPERM',
npm ЭЭЭ! Syscall: 'lstat',
npm ЭЭЭ! path: 'C:\\project\\android\\myApp\\node_modules\\fsevents\\node_modules' }
npm ЭЭЭ!
npm ЭЭЭ! Пожалуйста, попробуйте запустить эту команду снова как root/администратор.
npm ЭЭЭ! Полный журнал этого запуска можно найти в:
npm ЭЭЭ! C:\Users\itsvse_pc\AppData\Roaming\npm-cache\_logs\2018-06-19T06_52_38_238Z-debug.log
Произошла ошибка,Решение — запустить cmd в роли администратора, а затем снова выполнить приведённую выше команду！！
Используйте CD, чтобы войти в наш проект, а затем выполните следующую команду для запуска сервиса браузера:
После завершения выполнения Ionic автоматически поможет нам открыть наш браузер по умолчанию и перейти на страницу приложения. Когда браузер откроет страницу, Ionic включил режим livereload, после открытия мы редактируем файл в разделе www и сохраняем его, Ionic уведомит браузер о обновлении страницы через websocket,Нам не нужно вручную обновлять страницу каждый раз при внесении изменений, и значительно повысил эффективность нашей работы.
Как показано ниже:
|
Опубликовано 19.06.2018 15:07:03
|
|
|
|
