• 技術が集うTECH GUILD

    Vue CLIをインストールしました。

    概要

    1. nodebrewのインストール
    2. node.jsのインストール
    3. npmでvue-cliをインストール
    4. npmでyarnをインストール
    5. Vueでプロジェクトを作成する
    6. Webサーバ実行

    詳細

    nodebrewのインストール

    Homebrewでnodebrewをインストールする

    $ brew install nodebrew

    nodebrewのPATHをbash_profileに追加する

    $ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
    $ source ~/.bash_profile

    node.jsのインストール

    nodebrewでインストールできるnode.jsのバージョンを表示する。

    $ nodebrew ls-remote
    v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6
    〜〜 省略 〜〜
    v11.0.0 v11.1.0 v11.2.0 v11.3.0 v11.4.0
    〜〜 省略 〜〜

    最新のnode.jsをインストールする

    $ mkdir -p ~/.nodebrew/src
    $ nodebrew install-binary latest
    Fetching: https://nodejs.org/dist/v11.4.0/node-v11.4.0-darwin-x64.tar.gz
    ######################################################################## 100.0%
    Installed successfully

    カレントで利用するnode.jsのバージョンを指定する

    $ nodebrew use v11.4.0
    use v11.4.0
    $ nodebrew ls
    v11.4.0
    current: v11.4.0

    npmでvue-cliをインストール

    $ npm install -g vue-cli
    npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
    /Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/vue -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/vue-cli/bin/vue
    /Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/vue-init -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/vue-cli/bin/vue-init
    /Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/vue-list -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/vue-cli/bin/vue-list
    + vue-cli@2.9.6
    added 239 packages from 206 contributors in 17.343s

    npmでyarnをインストール

    $ npm install -g yarn
    /Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/yarn -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/yarn/bin/yarn.js
    /Users/{ユーザ名}/.nodebrew/node/v11.4.0/bin/yarnpkg -> /Users/{ユーザ名}/.nodebrew/node/v11.4.0/lib/node_modules/yarn/bin/yarn.js
    + yarn@1.12.3
    added 1 package in 1.789s

    YarnのPATHをbash_profileに追加する

    $ echo 'export PATH="$HOME/.yarn/bin:$PATH"' >> ~/.bash_profile
    $ source ~/.bash_profile

    Vueでプロジェクトを作成する

    例としてプロジェクト名「my-proj」を作成する

    $ vue init webpack my-proj
    
    ? Project name my-proj
    ? Project description A Vue.js project
    ? Author {ユーザ名} <xxxxxx@users.noreply.github.com>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended)
     yarn
    
       vue-cli · Generated "my-proj".
    
    
    # Installing project dependencies ...
    # ========================
    
    yarn install v1.12.3
    info No lockfile found.
    [1/5] 🔍  Validating package.json...
    [2/5] 🔍  Resolving packages...
    warning autoprefixer > browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    warning css-loader > cssnano > autoprefixer > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    warning css-loader > cssnano > postcss-merge-rules > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    warning css-loader > cssnano > postcss-merge-rules > caniuse-api > browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
    warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
    warning webpack-bundle-analyzer > bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
    [3/5] 🚚  Fetching packages...
    [4/5] 🔗  Linking dependencies...
    [5/5] 📃  Building fresh packages...
    success Saved lockfile.
    ✨  Done in 69.91s.
    
    
    Running eslint --fix to comply with chosen preset rules...
    # ========================
    
    yarn run v1.12.3
    $ eslint --ext .js,.vue src --fix
    ✨  Done in 2.16s.
    
    # Project initialization finished!
    # ========================
    
    To get started:
    
      cd my-proj
      npm run dev
      
    Documentation can be found at https://vuejs-templates.github.io/webpack

    Webサーバ実行

    $ cd my-proj
    $ npm run dev
    
    DONE Compiled successfully in 6410ms 20:45:07
    I Your application is running here: http://localhost:8080

    Webブラウザで表示する

    http://localhost:8080

    Welcome to Your Vue.js Appという画面が表示される。


    コメント一覧

    返信2018年12月28日 00:03

    【Vue.js入門】Vuetifyの導入 | TECH GUILD23/

    […] Vue CLIのインストールはこの記事で実施しました。 […]

    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください