NativeScriptのインストールとプロジェクトの作成

インストール

• nodejsが入っている状態で下記のコマンドを実行する

$ npm install -g nativescript

• インストール時に下記の２つの質問を聞かれる。２つともNを指定する

Do you want to help us improve NativeScript by automatically sending anonymous usage statistics? We will not use this information to identify or contact you. You can read our official Privacy Policy at
(匿名の使用統計を自動的に送信することで、NativeScriptの改善を支援しますか？この情報を使用して、お客様を特定したり連絡したりすることはありません。あなたは私たちの公式プライバシーポリシーを読むことができます)
? http://www.telerik.com/company/privacy-policy › (y/N)

bashまたはzshを使用している場合は、コマンドライン補完を有効にできます。
If you are using bash or zsh, you can enable command-line completion.

インストール確認

• 下記のコマンドが実行できたら正しくインストールされた事になる。

$ nativescript -v
7.1.1

$ tns --version
7.1.1

プロジェクト作成

• 下記のコマンドでプロジェクトを作成できる

$ tns create hello-world

• どのスタイルで開発をするか選択する

? First, which style of NativeScript project would you like to use: › - Use arrow-keys. Return to submit.
    Angular
    React
    Vue.js
    Svelte
    Plain TypeScript
❯   Plain JavaScript - Use NativeScript without any framework

• どのスタイルを選択しても下記のエラーが発生した

Cannot read property 'value' of undefined

• 下記のコマンドでプロジェクトを作成したら正しくプロジェクトを作成できました。

$ tns create hello-world --template vue

コードの確認

• vueファイルのファイルが作成されていることを確認できた。

<template>
    <Page>
        <ActionBar>
            <Label text="Home"/>
        </ActionBar>

        <GridLayout>
            <Label class="info">
                <FormattedString>
                    <Span class="fas" text.decode="&#xf135; "/>
                    <Span :text="message"/>
                </FormattedString>
            </Label>
        </GridLayout>
    </Page>
</template>

<script>
  export default {
    computed: {
      message() {
        return "Hello World";
      }
    }
  };
</script>

<style scoped lang="scss">
    @import '~@nativescript/theme/scss/variables/blue';

    // Custom styles
    .fas {
        @include colorize($color: accent);
    }

    .info {
        font-size: 20;
        horizontal-align: center;
        vertical-align: center;
    }
</style>