タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を説明しています。前回記事では、Vue.jsのプロジェクト作成や実行などができるCLI（コマンドライン）ツール「Vue CLI」の利用法を説明しました。 一方、Vue.jsのプロジェクト作成や実行ができるツールとして最近話題になっているのが「Vite」です。Vue.jsの作者であるEvan You氏とオープンソースコミュニティで開発されているこのツールは、「ヴィート」（フランス語で「高速」の意味）という名の通り、プロジェクト作成や実行をより高速に行うことを主眼に作られています。Vue.jsだけでなく、Reactなどさまざまな形式のプロジェクトに対
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようにJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsとTypeScriptの概要を紹介しました。今回はVue.jsのプロジェクト作成やビルドなどができるツール「Vue CLI」の利用法を説明します。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。前回記事では導入として、Vue.jsとTypeScriptそれぞれを単独で利用するサンプルを説明しました。 前回のVue.jsを利用したサンプルでは、Vue.js
If you've been developing with Vue prior to 2021 there's a good chance that your build tool of choice was the Vue CLI. It's been the de-facto standard for scaffolding Vue.js projects for a while. Now though, Evan You's next generation build tool Vite, has been garnering a lot of attention and is a great alternative to the Vue CLI. In this article, I'll walk you through the steps you need to take t
これでわかるはじめてのVue CLI | アールエフェクト
Vuc CLIはメンテナンスモードに入りました。Vue3でプロジェクトを作成する場合はcreate-vueを利用することでプロジェクトの雛形を作成することができます。 Vue CLIをインストールしてVueのアプリケーションを構築してみたい、Vue CLIをインストールしたのはいいけ何をどうしたらいいかわからないという人を対象にVue CLIのインストール方法、Vue CLIを利用したVueのプロジェクトの作成、Vue CLIで作成したプロジェクト内のファイル更新までVueビギナーの方でも理解できるように可能な限り詳細に説明を行っています。動作確認にはMac OSを利用しています。 Vue CLIのバージョン4、バージョン3で動作確認を行っています。本文書の更新日の2022/01/25では最新バージョンは4.5.15でVue3を選択することも可能です。次のメジャーバージョンである5.0.0
既存Vue CLIプロジェクトのVite化
現行のプロジェクトをVue CLIからVite化したのでその作業メモ。 from @vue/cli-service@4.5.9 (webpack@4.46.0) Vue@2 Vuex to vite@2.8.4 (esbuild@0.14.21, rollup@2.67.2) Vue@3（予定） Pinia なぜvite化するか devServerやHMRに時間がかかり開発体験が悪くなってきた モダンなライブラリを導入しようとしてもエラーになってしまった（piniaが導入できなかった） viteにすれば解決する問題なのかは分からなかったが、webpack@1の頃から5年以上開発してきたプロジェクトのせいでいろいろしがらみが増えてしまい、まずは足回りをシンプルにしたかった 結果的にpiniaが導入できるようになった これまでも改善したい要望はあったが、その場その場では「更新するコスト＞そのま
vue-cliをviteに移行する
viteとは一言で言うとめちゃくちゃ早いビルドツールです。 ビルドを超高速化することで開発時の生産性を大幅に向上させてくれます。 vite自体についての詳しい説明は本家を見ていただくとして、この記事ではvue-cliで開発しているプロジェクトをviteに移行する方法についてご紹介します。 実際どのくらい早くなるのかが気になるかと思うので、自分のプロジェクトで体感どのくらい早くなったかをご紹介します。 ちょっとわかりにくいですが、3秒くらい待ってたのが0.5秒くらいになっています。 導入前 導入後 スムーズにいけば1時間程度で導入でき、開発者全員が1日数百回ビルドすることを考えるとやって損はないと思います。(何よりビルドが早いと開発が楽しくなりますしね😆) では行ってみましょう！ バージョン情報 Vue 3.2.20(※Vue2でも基本的に同じ方法で移行できますが検証は行っていません🙏)
Vuetify 2 と @vue/composition-api を使用した TODO アプリを題材に Vue CLI から Vite / Vitest への移行を試して、とりあえず動くようになったので手順と設定を共有したいと思います。 ビルド速度やサイズの変化についてはこの記事の後ろにまとめてあります。 使用したコードは次のリポジトリにあります。 なお、この記事に記載している情報は 2022 年 1 月 30 日時点のものです。 記事の内容はあくまで一例であり、手順や設定が正しいものであるという保証はありませんのでご注意ください。 移行を試した背景 2022 年 1 月 18 日に Vue CLI がメンテナンスモードに入ったことが宣言されました。 1 Vue CLI 自体は引き続き利用可能で v5 安定版リリースに向けて作業が続けられています。 2 とはいえ今後の主流は Vite にな
【Vue.js】Vue CLIで作成したページのtitleとdescriptionを変更する方法 - Qiita
Vue CLIで作成したページはデフォルト状態だと、titleはプロジェクト名で全ページ共通。descriptionは存在しない状態になっている。 各ページ毎に個別のtitleとdescriptionを設定する手順について実例でまとめています。 目次 作業手順 ルートにmetaフィールドを追加 共通コンポーネントapp.vueにtitleとdescriptionをセットするメソッドを追加 共通コンポーネントapp.vueにmountedオプションをセット 共通コンポーネントapp.vueにwatchオプションをセット 共通テンプレート(pubulic>index.html)にdescription属性を追加 確認用ソースコード （参考）Vue CLIによるWEBページの作成方法 Vue CLIでWEBページを作成する方法 作業手順 ルートにmetaフィールドを追加 共通コンポーネントapp
この記事は 株式会社Y's アドベントカレンダー 19日目の記事です。(大遅刻...) 今月自社で行われたビアバッシュでVue関連の質問受付を丸投げされたので(発表者は私ではない)、初心にかえり、Vue-cliを前提とした、私が実際に構築しているディレクトリ構造についてお話しようかなと思います。 Vue-cliの種類 インストールの方法はたくさんの方がわかりやすく記事にしてくれているので割愛します。 ↓おすすめ参考記事 Vue.js を vue-cli を使ってシンプルにはじめてみる Vue-cliには６つのテンプレートが用意されています。(2017年12月現在) ＊ webpack github A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. (ホ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
はじめに Vue.js で作成するアプリケーションのテンプレートを自動生成してくれる Vue CLI というコマンドラインツールのセットアップから、プロジェクトの生成、アプリケーションの実行までの手順を記載しています。 Vue.js 3.x を前提としています。 Node.js のインストール Vue CLI を利用するには、Node.jsが必要です。 既にNode.jsをインストール済みの方は飛ばしてください。 インストーラーを起動 以下のリンクからNode.jsのインストーラーをダウンロードして実行します。 https://nodejs.org/ja/ 「Next」をクリック 「I accept the terms in the License Agreement」にチェックを入れて「Next」をクリック 任意のインストール先を指定して「Next」をクリック デフォルトのままで「Nex
Vue CLIコマンドを利用してVueのプロジェクトを作成する際のManually select featuresのlinter / formatterの選択時に何を選択したらいいかわからないので一番上の選択肢を迷いもせず選択している人を対象にVue.js環境におけるEslintとPrettierについて説明を行っています。EslintとPrettierについてはVue.jsに限定された話ではなくJavaScriptを使いこなす上で必須な知識なのでESLintが理解できていない人にお勧めの内容になっています。本文書を読んでもESLintやPrettierのルールをすべて理解することができませんがESLint、Prettierが何をしてくれる機能なのかは動作確認を行いながら完全に理解することができます。 Vue CLIでlinter / formatterを選択する Vue CLIのvue
Random\Randomizer クラスで日常のあれこれを解決しよう！ / Random\Randomizer class solves familiar trouble
Vue CLIのデフォルト設定からESLintのベストプラクティスを検討する | フューチャー技術ブログ
TIGの伊藤真彦です。 この記事はフロントエンド連載の3記事目です。 今回は愛用しているVue CLIを利用して、フロントエンドアプリケーションの詳細な設定について調査してみました。 はじめにプログラムを実装する上で、コードの書き方は絶対的な正解のないトピックとして存在します。 例えば、コードのインデントはタブなのか、半角スペースなのか、文字列リテラルを囲う記号は””なのか’’なのか、といった細かいルールです。これらのルールは、究極的には好みの問題で、正解のあるものではありません。 正解がない以上、コードを実装する際にどのようなフォーマットが正しいかを判断することは難しいです。言語によってはコード規約をプロジェクト、チーム、または会社単位で明記、時には社外に公開する事でこれらルールの混乱を防ぐ試みも存在します。 ちなみにフューチャーではJavaとSQLのコード規約を公開しています。 しかし
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！
コマンドラインツール「Vue CLI」で本格的なVue.jsプロジェクトを作成しよう
How to Migrate from Vue CLI to Vite - Vue School Articles
Vue CLI で作成した Vuetify アプリを Vite / Vitest に移行する - Qiita
Vue-cli(webpack)解剖 ーディレクトリ構成ー - Qiita
vue-cliでaxiosを使用する(設定から使用方法まで) - Qiita
Vue.js 3 入門 「Vue CLI のセットアップ」 - Qiita
Vue CLIを使ってESLintとPrettierが何か完全に理解する | アールエフェクト
Vue_CLIプロジェクトにViteを導入検討してみた
【Vue.js】Vue CLI でタブ機能を作る（動的コンポーネント） - Qiita
support.npe.fit
detail.chiebukuro.yahoo.co.jp
mainichi.jp
www.max-ltd.co.jp
ghostlife.hatenablog.com
luxewatchsworld.com