NativeScript Vue примеры взаимодействия фреймворков с помощью плагина


Содержание материала:

Создание приложений с помощью Vue CLI

У большинства JavaScript- фреймворков есть интерфейс командной строки (CLI). Но они достаточно сложные для понимания, поскольку некоторые команды могут принимать большое количество параметров и флагов.

В Vue CLI появился графический пользовательский интерфейс (GUI), который поможет сэкономить много времени.

Ресурсы

  • Базовый уровень понимания JavaScript и Vue.JS;
  • Должен быть установлен NodeJS.

Установка

Установите Vue CLI 3.

Набрав vue в терминале, вы получите результат, приведенный ниже.

Скаффолдинг приложения на Vue

Создайте каталог для размещения Vue-приложения. В моем случае он называется vue-ui. mkdir vue-ui Затем запустите Vue UI с помощью приведенной ниже команды. vue ui Данная команда открывает Vue GUI по адресу http://localhost:8001 в браузере, который используется в системе по умолчанию.

Эти три раздела интуитивно понятны, но мы все же уточним их назначение:

  • Projects – список проектов.
  • Create – позволяет создать новый проект на основе Vue.
  • Import – позволяет импортировать проект из каталога или из удаленного репозитория, расположенного на github.

В нижней части экрана, в строке статуса показывается расположение текущего каталога.

Создадим проект. Кликните по вкладке «Create» и нажмите кнопку « Create a new project here ».

Появится всплывающее окно. Назовем проект scotch-vue.

Выберите npm в качестве менеджера пакетов, используемого по умолчанию, и инициализируйте git-репозиторий.

Нажмите «Next», чтобы перейти к шаблонам. Здесь задайте базовые конфигурации Vue-приложения. Выберите пункт « Manual » и нажмите «Next».

Если у вас есть сохраненные пресеты, они появятся на этой странице и их можно будет выбрать. Ниже показан пресет scotch-vue и пресет all-settings , которые я создал ранее.

Далее перейдите на страницу «Features», чтобы активировать нужные плагины. Я использовал следующие конфигурации : Babel, Router, CSS Preprocessor, Linter/Formatter, Unit Testing, Use Config Files .

У всех параметров есть ссылка « More Info », которая ведет в справочный раздел.

Нажмите «Next, чтобы настроить конфигурации функций, добавленных в предыдущем разделе.

Выберите SCSS/SASS в качестве препроцессоров.

Я использовал инструменты ESLint + Prettier , а также выбрал опцию «lint on save».

Затем выберите инструмент для модульного тестирования: Mocha и Chai .

Кликните по кнопке «Create Project». После этого задайте имя пресету: scotch-vue-preset . В следующий раз можно будет создать проект прямо из этого пресета.

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

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

Панель управления проектом

Панель управления разделена на четыре части:

1. Plugins

Список установленных плагинов и доступных для установки.

Для поиска новых плагинов нажмите кнопку « Install Plugins », расположенную в правом верхнем углу.

2. Dependencies

Здесь отображается список npm-зависимостей и позволяет добавлять или удалять их.

Чтобы активировать поиск и установку зависимостей, нажмите кнопку « Install Dependencies », расположенную в правом верхнем углу.

3. Configurations

Позволяет настраивать конфигурацию приложений.

Конфигурации Vue CLI

Конфигурации Eslint

4. Tasks

Операции с приложением, которые выполняются в процессе его создания:

  • Serve – компилирование и перезагрузка.
  • Build – компилирование и минификация для продакшена.
  • Lint – проверяет и исправляет ошибки в файлах;
  • Test – выполняет тесты, используя Mocha;
  • Inspect – инспектирует webpack и конфигурацию.

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

Serve

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

Кнопка « More info » открывает документацию по vue-cli-service. После нажатия на кнопку « Run Task » приложение откроется в новой вкладке.

Вкладка «Dashboard Tab»

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

Вкладка «Output»

В этой вкладке отображаются логи с данными о процессе выполнения задачи.

Analyzer

Анализирует код и создает график, демонстрирующий различные зависимости кода.

Build

Раздел Build почти аналогичен разделу Serve. Разница только в том, что в Build создается пакет, который можно использовать для развертывания приложения.

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

Обратите внимание на то, как изменился анализатор.

test:unit

Позволяет запускать модульные тесты для приложения.

Inspect

Создает конфигурацию пакета в файле формата json.

Заключение

Мы узнали, как создается новое приложение на основе VueJS с помощью инструмента Vue UI. Надеемся, что этот инструмент вам пригодится.

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

Данная публикация представляет собой перевод статьи « Create Vue Apps Visually with the Vue CLI User Interface Tool » , подготовленной дружной командой проекта Интернет-технологии.ру

Плагины

Создание плагина

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

  1. Добавляющие глобальные методы и/или свойства, например vue-custom-element
  2. Добавляющие глобальные объекты: директивы/фильтры/переходы и т.д., например vue-touch
  3. Добавляющие опции компонентов посредством глобальной примеси, например vue-router
  4. Добавляющие методы экземпляра Vue через Vue.prototype.
  5. Библиотеки, предоставляющие собственные API, комбинируя вышеперечисленные возможности, например Vue-router


Плагин Vue.js должен содержать метод install. Метод будет вызван с конструктором Vue в качестве первого аргумента, и, возможно, с дополнительными опциями:

Использование плагинов

Для использования плагина нужно вызвать глобальный метод Vue.use():

При установке плагина можно передать дополнительные параметры:

Vue.use автоматически предохранит вас от многократной регистрации одного и того же плагина. Вызов Vue.use для одного и того же плагина несколько раз приведёт лишь к однократной его установке.

Некоторые официальные плагины Vue.js, такие как vue-router, автоматически вызывают Vue.use(), если обнаруживают глобальную переменную Vue. Однако в случае использования инструментов модульного окружения, таких как CommonJS, всегда необходимо вызывать Vue.use() явно:

Обратите внимание на awesome-vue — огромную коллекцию плагинов и библиотек от сообщества Vue.

Why NativeScript?

NativeScript is an open source framework for building mobile apps which supports Vue.js, Angular, TypeScript and plain ol JavaScript. It prides itself on being fast and having «Native Performance», easy to extend, and learn. It is definitely worth mentioning that NativeScript is backed by Progress Software, the company which acquired Telerik and provides a host of powerful UI tools for developers. For Vue Js developer NativeScript provides us with a tool to build mobile apps that run like mobile apps and do not need to rely on a WebView all the time (hybrid apps). While there is Weex, NativeScript is much better supported & documented for the Western English speaking world.

The Prerequisites

As the official docs indicate, you will need to have a few things setup before you can get going with NativeScript:

  • Node.js (latest is best)
  • NativeScript CLI
  • OS Setup with NativeScript

This is actually the hardest part about this tutorial, as you will need to update most of your tools to the latest versions or you risk the high likelyhood of some build process failing. Once you do get past the setup phase though, development itself is similar to building any normal Vue.js app.

Updating Node.js

Update your version of Node.js to the latest. How you do this will highly depend on your OS and your preference for managing NPM and Node. David Walsh has this article on how to update here. Please note this is out dated and he has a note at the top recommending to use NVM instead.

NativeScript CLI

Next, you’ll need to install the NativeScript CLI

If all goes well you’ll prompted about a few things to finish the setup.

OS with NativeScript

Probably the most time consuming task will be getting NativeScript itself setup on your specific OS. The NativeScript Vue docs have the specific links for your OS here.

For this tutorial we’re going to assume we’re on a Mac and are building an iOS app. So to continue we should make sure your computer has xCode all setup.

Getting Started

Okay, hopefully you’ve made it this far and have a proper enviroment setup.

For this tutorial, you have two options. You can try out the NativeScript template nativescript-vue/vue-cli-template which is available here. Which will run you through a setup

Or if you prefer, you can just clone the tutorial repo I created here.

If you prefer starting from scratch with the NS template, run the following to setup your project:

You’ll be prompoted with a series of questions about your project. For this tutorial we picked Yes to install the vue-router and vuex . Also, we picked a Color scheme of light but feel free to use anything you like.

Once it’s installed you’ll have a directory structure like below:

There’s a lot of files going on here, for now don’t worry we’ll go over this in future tutorials.

Build It

Lets move on to building this app to see what happens.

First install the packages needed for this project.

Next, lets try running this locally with debugging on.

If your setup is anything like mine, you’ll probably get some complaints like below because we never setup NativeScript completely.

If you didn’t receive any errors you can skip these next 2 sections on getting setup with NativeScript!

Топ-пост этого месяца:  Исследование как внедрение AMP влияет на SEO сайтов

Setup NativeScript

Because we have the NativeScript CLI installed, we can run the following:

It will ask you to install xCode, HomeBrew, Google Chrome, Java SDK, Android SDK and more. if you are comfortable with installing everything then just accept All by entering A . This is by far the least fun part about getting going!

Installation can take a while so go grab a cup of your favourite beverage while you wait :).

Setup NativeScript Cloud

We’ll follow the recommendations and install NativeScript cloud with the following command.

This should not take quite as long.

Now lets give the build step a try again:

If this works for you without any major errors, you should see xCode show an iPhone that eventually results in a screen like this:

If you see this, congrats! You are now setup and ready to build a native app!

Testing this out

Lets start with something simple, in your project go to HelloWorld.vue and update some text in the template . Once you update it you’ll see the app reload with the changes.

Extending the demo app

So now we have our app setup, lets look at how you would go about adding a new screen or section in the app.

Router

Open up src/router/index.js and add a new path like below

Sample Component

Next, lets create the sample component src/components/Sample.vue with some very basic code.

Add Section to Home Page

Lastly, lets add a link to this Sample page from the main home page as another button within the Stack Layout

If all goes well, your app will look something like this:

Adding some elements

With NativeScript, it’s really easy to add in some common form elements you would need in a typical application. Using the sample page we built, lets add a typical date picker and button. Here is what the main body of the page should look like now:

We have added the DatePicker and Button elment with appropriate methods to call based on specific actions.

When the date is changed, we will display a basic alert prompt window and log the call back to the console. As for the button, lets make it bring up the common action prompt which can be used for various hooks. In this scenario we will provide two options and handle the result via the call back.

Here is what the Sample Page should look like now:

Getting Started with NativeScript-Vue 1.0

Recently, the NativeScript-Vue team announced a 1.0 release of NativeScript-Vue ��

As its name implies, NativeScript-Vue is a project that integrates Vue.js into NativeScript, allowing you to build completely native iOS and Android apps using Vue.js.

In this article we’ll look at how you can start building your first app using NativeScript-Vue, and answer some common questions along the way. Let’s get started.

Choosing your environment

First things first, there are two ways to develop with NativeScript-Vue.

    Option 1: Work in NativeScript Playground: NativeScript Playground is a browser-based NativeScript development environment that lets you start coding without setting up native iOS and Andro >In this article we’ll start devleoping using NativeScript Playground, as it’s a great tool for learning how NativeScript-Vue works without going through the hassle of setting up a local environment. After that, we’ll look at the next steps you need to take to set up a local NativeScript-Vue development workflow.

For now, let’s dive right in and start building.

Using NativeScript Playground

Start by visiting https://play.nativescript.org/?template=play-vue, which opens Playground with a Vue template preloaded. The first thing you’ll see is a prompt that looks like this.

To use NativeScript Playground you need to download and install two apps on your iOS or Android device. The first app, “NativeScript Playground”, has the ability to scan QR codes you see in your browser, and the second, “NativeScript Preview”, is an app that runs the code that you write in your browser. Here’s what you need to do.

    Download and install both the NativeScript Playground and NativeScript Preview apps on your iOS or Andro >

Go ahead and scan the QR code in your Playground (not the QR code in this article); you should see the following app on your device.


This app might seem simple, and it kind of is, but there’s one not-especially-obvious thing going on here: the user interface components you see on the screen are not DOM elements — they’re completely native Andro >UILabel s on iOS and android.widget.TextView s on Android.

The power of NativeScript is you get to use these native controls using JavaScript and using frameworks like Vue. Cool, huh?

Now that you have your up and running let’s start making some changes. For example, go ahead and change the text attribute of one of the app’s controls, and then use Cmd + S (or Ctrl + S on Windows) to save your update. You should see the change on your device automatically.

NOTE: I didn’t speed up that gif at all — Playground really is that fast. Try it for yourself!

Let’s do a few more things with this example. Playground has a collection of components that you can easily drag and drop into your code to add to your app. Grab a button control (refer to the gif below if you can’t find it), and drag the component into your app’s template. Save your changes, and you should see a button automatically appear on your device.

Now that you’ve had a minute to play around in Playground, let’s look closer at the syntax of this button example.

If you’re familiar with Vue.js you probably recognize this syntax, as it’s identical to the syntax you use for event binding in Vue.js web apps. In fact, basically all the syntax you know from building Vue.js web apps can directly apply to working with native user interface components in NativeScript-Vue.

For instance, the code below uses Vue’s data-binding syntax to change the text of the previous example’s button.

The power of NativeScript-Vue is that you can use familiar Vue.js syntax to build native iOS and Android interfaces from a single code base.

Try dragging in a few other components to get a feel of how NativeScript-Vue works (make sure to try the charts and calendar especially ��). When you’re ready, let’s move on to the next steps you need to take.

Learning NativeScript-Vue

One of the great things about NativeScript-Vue is it considerably lowers the barrier to building native iOS and Android applications. Although this article’s examples have been simple so far, remember that normally you’d have to learn new software (Xcode and Android Studio) and new languages (Swift or Objective-C, Kotlin or Java) even to build trivial native applications.

Even though NativeScript-Vue makes mobile development easier, Vue.js web developers still have a number of concepts they need to learn to be successful with NativeScript-Vue. Let’s look at some of the most important ones.

Learning task #1: NativeScript user interface components

Because NativeScript uses native iOS and Andro >

Don’t worry though; although these user interface components are new, you can still use familiar Vue syntax to handle tasks like event and data binding. You just need to learn what the new components are and how to configure them. And to do that, you can refer to the component documentation NativeScript-Vue docs.

For example, remember the from earlier in this article? The NativeScript-Vue documentation on the component has an example and links to the full API documentation.

Learning task #2: NativeScript layouts

Because NativeScript does not use HTML or a DOM, NativeScript cannot replicate many web layout concepts such as float and display: block|inline . You must therefore learn some new ways to organize your user interface components on the screen.

There are two pieces of good news though. First, NativeScript does have a full flexbox implementation that works on both iOS and Android — meaning, you can use a familiar syntax for most of your layout tasks.

Second, the NativeScript team has a site dedicated to teaching the non-flexbox NativeScript layouts. When you’re ready to get serious with NativeScript-Vue, it’s worth setting aside 30 minutes to go through the tutorials on the site.

Learning task #3: The NativeScript CLI

In this article we started with NativeScript Playground, a browser-based NativeScript learning environment. Although Playground is great for getting started, eventually you’ll want to set up a local environment for NativeScript development. A local environment allows you to compile apps for the iOS App Store and Google Play, utilize NativeScript plugins in your apps, and take advantage of tooling such as webpack and .vue files.

To develop locally you need to first install the NativeScript CLI from npm.

Next, and this is the tricky part, you need to set up the appropriate iOS and Android dependencies for performing builds on your development machine. The NativeScript documentation has a full guide to walk you through the process, but it’s easy to get stuck here as there are lots of moving pieces (different npm versions, different Android versions, etc).

NOTE: If you hit issues going through the installation process, the NativeScript community forum is a great place to reach out for help.

Once you complete the setup, you’ll be able to use the NativeScript CLI to build, run, and deploy NativeScript-Vue applications. For example, you can use the following command to create a new NativeScript-Vue app.

Next, you can use the tns run android command to run your app on an Android emulator or USB-connected Android device.

And finally, you can use the tns run ios command on macOS to run your app on an iOS simulator or USB-connected iOS device.

And finally, you can use the tns run ios command on macOS to run your app on an iOS simulator or USB-connected iOS device.

Топ-пост этого месяца:  Как вставить шорткод в слайдер

Where to go from here

Once you learn the NativeScript user inteface components, figure out how NativeScript layouts work, and get the NativeScript CLI down, you’re well on your way to building your next mobile app with NativeScript-Vue. Here are some other links you might find useful as you move on to more advanced NativeScript-Vue development.

    Debugging — NativeScript includes an integrated debugger built on top of the Chrome Developer Tools. The debugger allows you to step through JavaScript code, view your console, monitor network requests, and even view the visual tree of your iOS and Andro >

Вопросы с тегом ‘nativescript-vue’

Количество результатов: 60

Я использую RadCalendar с Nativescript-Vue и пытается разрешить пользователю вручную (через форму) добавить событие, но после того, как событие получает толкнул в Even.

У меня есть свежий nativescript-вю установки и при запуске ТНС запустить андроид —bundle приложения развертываются в андроид эмулятор, но я получаю это исключение An.

Мой nativescript-вю приложение имеет TabView в нижней части, а Stacklayout в верхней части для целей ActionBar/заголовочных с категориями. Я не хочу повторять TabView .

NativeScript Применение Сбои на старте, когда в сборке релиз, но работает хорошо, когда в отладочных любое понимание будет очень полезно это логично скриншот

В соответствии с названия, есть метод использовать мопс в nativescript-ве? я пробовал добавлять мопс и мопс-простой-погрузчик проект и изменить webpack.config.js с .

Я начинаю изучать Vue JS и теперь пытаюсь узнать в nativescript-ве. Что я должен сделать для того, чтобы иметь автономную БД, где я могу хранить свои данные без исполь.

У меня есть проблема с моим приложением и его навигацией. Мое приложение имеет четыре экрана, но иногда, когда нажмите на кнопку андроида дома на втором экране (или л.

Как мы можем реализовать страницу загрузчик ?? Может кто-нибудь показать мне подробно код.

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

Есть ли способ, чтобы приспособить ListView (содержащий отдельные контейнеры материала) от одного (1) на колонке с подвижным до двух (2) столбцов при просмотре на план.

Я следую учебник, как это указано здесь: https://nativescript-vue.org/en/docs/getting-started/vue-devtools/ У меня есть инструменты, Дев и приложение и работает, но Д.

Как я могу создать карусель с nativescript-вю? Я могу создать несколько отдельных компонентов, таких как welcome1.vue, welcome2.vue с кнопкой и анимации, но я понятия .

У меня есть кнопки извлечения динамически, я хочу, чтобы добавить границы дна стиля CSS для кнопки, которая повернутая. Но это применимо ко всей кнопке. Как я могу реш.

Я разработка в доме (предприятия) приложения с Nativescript-Vue и используя nativescript-плагин-firebase доставить уведомление толчка. Все работает, как ожидалось на A.

следующий этот проект , Мне удалось получить список событий, которые должны быть включены в календарь через пчел. Теперь вы хотели бы знать, если вы можете нажать на к.

Может мне помочь. Когда я делаю навигации, созданный() крючок всегда бывает. Например, я сначала перейти от Step1 к Step2, созданный() Шаг2 крюк имеет место (но не раз.

У меня есть вопрос о установке плагина. устал 2 недели, но до сих пор не получить его. я использую nativescript-barcodescanner на -vue, после того, как я НПМ .

Можно ли иметь условную зависимость package.json на основе платформы строятся для, или, некоторого крюка, исключающий/включает в себя зависимость основано на платформе.

Я веб-разработчик Laravel. Я планирую использовать NativeScript-Vue с WebView. Какие знания, которые должны предшествовать, чтобы узнать это? Я знаю только основы о ве.

Я прочитал документацию о Radlistview на RadListView нагрузки по требованию но я не знаю, как сделать изменить шаблон для «loadOnDemandItemTemplate» в NativeScript-Vue.

Я делал приложение с NativeScript-Vue, но v-на: keyup.enter = «поступил» не работает на Android. код ниже. Структура файла: TodoInput.vue: .

Я nativescript-вю разработчик новичок. Я в настоящее время осуществляет код на стороне Android и мне удалось вставить WebView. Тем не менее, если я прикоснулся заднюю .

Я работаю приложение с Nativescript + Vuejs и Nodejs + MongoDB в стороне сервера и есть проблемы, когда я отправить Emoji characteres из моей прошивки (12.1.4) на серв.

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

Я вижу много из них в соотнесении тем все участвующие в представлении в Google Store. Можно ли создать .apk локально (CLI), так что я могу поделиться этим с нескольким.

кто-нибудь может помочь? у меня есть это одна страница приложения, чтобы показать проблему: если вы измените поле, а затем нажмите кнопку «Сохранить» в верхней измен.

Я пытаюсь заполнить ListView NativeScript-Vue с шаблонами, которые содержат компоненты, из которых их типы не известны заранее. Например, этот код не работает, как Nat.

Мне нужна помощь, чтобы улучшить производительность довольно сложной ListView. Он состоит из 6 условных V-шаблонов, которые я подозреваю плохая производительность мудр.

Я хочу, чтобы достичь ниже макета в nativescript-vue. Есть ли плагин доступен через который я могу разработать схему, как это, и он будет работать same as web 0 голосов

Я пишу vue.js Nativescript приложения. Я хочу Vuex управлять состоянием подключения мобильного устройства код я настроил мониторинг о состоянии соединения и пожарах к.

EDIT: Смотрите мой комментарий ниже о добавлении элементов в шаблоне Вью EDIT снова сегодня: Итак, вот что на самом деле вызывает this.$navigateTo прекратить работу.

Как получить элемент в nativescript с помощью Vue?

Я хочу , чтобы получить элемент изображения с на созданных.

Я не могу найти что-либо на Google. Большинство из учебника по Интернету используется машинопись и всегда начинаются с page=args.object

Вы можете использовать refrences для этого.

Как уже упоминалось в комментариях других ответов:

Кроме того, вы можете получить доступ к nativeView пути доступа к его собственность: пусть nativeLayout = this.$refs.body.nativeView ;

В NativeScript-Vue nativeView из ViewComponent является оберткой элементом реальной родной платформы (IOS / Android) элемента / зрения.


Getting Started with NativeScript-Vue 1.0

Recently, the NativeScript-Vue team announced a 1.0 release of NativeScript-Vue ��

As its name implies, NativeScript-Vue is a project that integrates Vue.js into NativeScript, allowing you to build completely native iOS and Android apps using Vue.js.

In this article we’ll look at how you can start building your first app using NativeScript-Vue, and answer some common questions along the way. Let’s get started.

Choosing your environment

First things first, there are two ways to develop with NativeScript-Vue.

    Option 1: Work in NativeScript Playground: NativeScript Playground is a browser-based NativeScript development environment that lets you start coding without setting up native iOS and Andro >In this article we’ll start devleoping using NativeScript Playground, as it’s a great tool for learning how NativeScript-Vue works without going through the hassle of setting up a local environment. After that, we’ll look at the next steps you need to take to set up a local NativeScript-Vue development workflow.

For now, let’s dive right in and start building.

Using NativeScript Playground

Start by visiting https://play.nativescript.org/?template=play-vue, which opens Playground with a Vue template preloaded. The first thing you’ll see is a prompt that looks like this.

To use NativeScript Playground you need to download and install two apps on your iOS or Android device. The first app, “NativeScript Playground”, has the ability to scan QR codes you see in your browser, and the second, “NativeScript Preview”, is an app that runs the code that you write in your browser. Here’s what you need to do.

    Download and install both the NativeScript Playground and NativeScript Preview apps on your iOS or Andro >

Go ahead and scan the QR code in your Playground (not the QR code in this article); you should see the following app on your device.

This app might seem simple, and it kind of is, but there’s one not-especially-obvious thing going on here: the user interface components you see on the screen are not DOM elements — they’re completely native Andro >UILabel s on iOS and android.widget.TextView s on Android.

The power of NativeScript is you get to use these native controls using JavaScript and using frameworks like Vue. Cool, huh?

Now that you have your up and running let’s start making some changes. For example, go ahead and change the text attribute of one of the app’s controls, and then use Cmd + S (or Ctrl + S on Windows) to save your update. You should see the change on your device automatically.

NOTE: I didn’t speed up that gif at all — Playground really is that fast. Try it for yourself!

Let’s do a few more things with this example. Playground has a collection of components that you can easily drag and drop into your code to add to your app. Grab a button control (refer to the gif below if you can’t find it), and drag the component into your app’s template. Save your changes, and you should see a button automatically appear on your device.

Now that you’ve had a minute to play around in Playground, let’s look closer at the syntax of this button example.

If you’re familiar with Vue.js you probably recognize this syntax, as it’s identical to the syntax you use for event binding in Vue.js web apps. In fact, basically all the syntax you know from building Vue.js web apps can directly apply to working with native user interface components in NativeScript-Vue.

For instance, the code below uses Vue’s data-binding syntax to change the text of the previous example’s button.

The power of NativeScript-Vue is that you can use familiar Vue.js syntax to build native iOS and Android interfaces from a single code base.

Try dragging in a few other components to get a feel of how NativeScript-Vue works (make sure to try the charts and calendar especially ��). When you’re ready, let’s move on to the next steps you need to take.

Learning NativeScript-Vue

One of the great things about NativeScript-Vue is it considerably lowers the barrier to building native iOS and Android applications. Although this article’s examples have been simple so far, remember that normally you’d have to learn new software (Xcode and Android Studio) and new languages (Swift or Objective-C, Kotlin or Java) even to build trivial native applications.

Топ-пост этого месяца:  Оптимизация MySQL – подтверждение выдвинутой аксиомы

Even though NativeScript-Vue makes mobile development easier, Vue.js web developers still have a number of concepts they need to learn to be successful with NativeScript-Vue. Let’s look at some of the most important ones.

Learning task #1: NativeScript user interface components

Because NativeScript uses native iOS and Andro >

Don’t worry though; although these user interface components are new, you can still use familiar Vue syntax to handle tasks like event and data binding. You just need to learn what the new components are and how to configure them. And to do that, you can refer to the component documentation NativeScript-Vue docs.

For example, remember the from earlier in this article? The NativeScript-Vue documentation on the component has an example and links to the full API documentation.

Learning task #2: NativeScript layouts

Because NativeScript does not use HTML or a DOM, NativeScript cannot replicate many web layout concepts such as float and display: block|inline . You must therefore learn some new ways to organize your user interface components on the screen.

There are two pieces of good news though. First, NativeScript does have a full flexbox implementation that works on both iOS and Android — meaning, you can use a familiar syntax for most of your layout tasks.

Second, the NativeScript team has a site dedicated to teaching the non-flexbox NativeScript layouts. When you’re ready to get serious with NativeScript-Vue, it’s worth setting aside 30 minutes to go through the tutorials on the site.

Learning task #3: The NativeScript CLI

In this article we started with NativeScript Playground, a browser-based NativeScript learning environment. Although Playground is great for getting started, eventually you’ll want to set up a local environment for NativeScript development. A local environment allows you to compile apps for the iOS App Store and Google Play, utilize NativeScript plugins in your apps, and take advantage of tooling such as webpack and .vue files.

To develop locally you need to first install the NativeScript CLI from npm.

Next, and this is the tricky part, you need to set up the appropriate iOS and Android dependencies for performing builds on your development machine. The NativeScript documentation has a full guide to walk you through the process, but it’s easy to get stuck here as there are lots of moving pieces (different npm versions, different Android versions, etc).

NOTE: If you hit issues going through the installation process, the NativeScript community forum is a great place to reach out for help.

Once you complete the setup, you’ll be able to use the NativeScript CLI to build, run, and deploy NativeScript-Vue applications. For example, you can use the following command to create a new NativeScript-Vue app.

Next, you can use the tns run android command to run your app on an Android emulator or USB-connected Android device.

And finally, you can use the tns run ios command on macOS to run your app on an iOS simulator or USB-connected iOS device.

And finally, you can use the tns run ios command on macOS to run your app on an iOS simulator or USB-connected iOS device.

Where to go from here

Once you learn the NativeScript user inteface components, figure out how NativeScript layouts work, and get the NativeScript CLI down, you’re well on your way to building your next mobile app with NativeScript-Vue. Here are some other links you might find useful as you move on to more advanced NativeScript-Vue development.

    Debugging — NativeScript includes an integrated debugger built on top of the Chrome Developer Tools. The debugger allows you to step through JavaScript code, view your console, monitor network requests, and even view the visual tree of your iOS and Andro >

nativescript-vue/vue-cli-plugin-nativescript-vue

A vue cli 3.x plugin for NativeScript-Vue

Nativescript-Vue Plugin for vue-cli@3.0

This plugin will integrate Nativescript-Vue into new and existing Vue projects. Additionally, it will allow for the choice of developing for Native only environments or Native and Web environments under a single project structure. In addition, choosing to integrate Nativescript-Vue-Web, will allow for the development of Web components with a NativeScript-Vue like syntax that has the benefit of allowing for the sharing of components between the Native and Web sides of the project. This helps reduce the amount of code, maintenence needs, and the amount of time needed for development activities.

Sharing logic in a single Web and Native capable component

The key feature of this plugin is that it will allow you to compose SFC’s that contain both Web and Native structures in them. If your component has exactly the same logic (

Основные модули Nativescript Vue

У меня проблемы с пониманием того, как использовать модули Framework в nativescript-vue.

Нужно ли декларировать в App.js/Main.js или в компоненте, который я собираюсь использовать?

Я пришел из Web Development с Vue.js, я думаю, что пример реализации, которому я пытаюсь следовать, будет выглядеть так:

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

В Интернете, если мне нужно было использовать Axios, я бы импортировал его в App.js/Main.js, чтобы оставаться глобальным в приложении, или SPF, чтобы оставаться локальным и иметь возможность вызывать нужные компоненты.

В мобильном, если я использую чистый nativescript, импорт понятен, но в nativescript-vue я не могу понять, как его использовать, я не знаю, настроен ли он по умолчанию или нет.

Вы должны быть в состоянии использовать все модули CommonJS Vue, которые вы использовали в Web, то есть он не должен зависеть от определенных функций браузера.

Возможно, вы все еще сможете использовать Axios, поскольку он внутренне использует только XMLHttpRequest, то есть действительный глобальный объект в среде NativeScript.

Если у вас есть модуль Vue, который зависит от HTML Dom/document/window/local или сеансового хранилища и т.д., То он может завершиться с ошибкой. К вашему сведению, есть плагины, такие как nativescript-localstorage, которые имитируют такие функции, как локальное/сессионное хранилище.

Native apps with Vue.js: Weex or NativeScript? — chapter II

Six months is a lot of time in Javascript framework land, so my previous article needs an update. I advise you to check it out before this one, as we go deeper in the philosophies behind Weex and NativeScript-Vue.

So… what’s new?

Both frameworks are being furiously developed, particularly by improving the limitations pointed out six months ago.

Weex has a new website with better documentation. The CLI tools (weex-toolkit) were refined and should provide a smoother development experience. The Weex core team is very invested in showing the framework to the world. Also, now we have the UI lib weex-ui and a solid set of plugins named ‘natjs’ to access native capabilities.

NativeScript-Vue reached version 1.0! Igor Randjelovic did a great job with the new project website at nativescript-vue.org. The community grew exponentially after v1.0 was released, with several contributions including a new Vue-CLI template by Pascal Martineau. The NativeScript team provides great support for NativeScript-Vue by giving several incentives to community members and adjusting their tooling to specific needs of NativeScript-Vue. For example, you can now use Vue.js directly from the NativeScript Playground, and the Sidekick team is also working on a Vue.js template.

Different approaches

Weex and NativeScript-Vue are not the same thing. The right framework will vary depending on your app and target platforms.

With Weex, we write html(-ish) and css flexbox that will render into native and web components. This is actually quite hard to do because native UI APIs are very different from flexbox, which makes the UI development somewhat fragile and error prone. You may end up with lots of difficult edge cases.

Also, Weex does very little to respect the native UI. For instance, buttons look exactly the same in iOS, Android and Web (see image above). This can be a good thing if your app is heavily styled, but generally it is a good idea to use native UI components to show a familiar look-and-feel to the user. Sure, Weex builds for the web, but in practice the web build is a second class citizen. Depending on your app size and complexity, you should expect to write at least some amount of platform-specific code.

NativeScript-Vue

On the other hand, NativeScript embraces the native platform. You build the UI with layout elements similar to those you find on native APIs, so the result is more predictable. Consequently, it is easier to build apps that look and feel more native on Android and iOS. As a downside, it cannot build for the web. It is possible, however, to set up your project in a way that allows you to share as much code as possible between Web and native platforms. Using this technique you only have to duplicate the view layer of the app (templates, css and some UI code).

So… which one should I choose?

As with most things in development… It Depends™. If you want an app with distinct looks and absolutely need a web build too, then maybe Weex is for you. Just beware of possible edge cases. something may come back to bite you in the future and it is difficult to get support from the community. If you want better native support and look-and-feel, then Nativecript is a solid bet. If you run into trouble, there are lots of people willing to help in NativeScript Slack’s #vue channel (invites here).

As for me, I am still betting on NativeScript-Vue! It feels more predictable and community supported.

Добавить комментарий