タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに 本連載では、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プロジェクトの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 にな
この記事は 株式会社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. (ホ
はじめに 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のコード規約を公開しています。 しかし
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.js 3 入門 「Vue CLI のセットアップ」 - Qiita
Vue CLIを使ってESLintとPrettierが何か完全に理解する | アールエフェクト
Vue_CLIプロジェクトにViteを導入検討してみた
nagoya-hidamarikokoro.jp
news.yahoo.co.jp
t-s-life.hatenablog.com
kuromaron.hatenablog.com
stamp.funakiya.com
news.jp