frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Vue.js環境構築まとめ

スポンサードリンク


スポンサードリンク


Vue.jsを触ることが多いので環境構築をまとめます。

CDNで直接組み込み

一番簡単にVue.jsを利用することができます。
お試しで使う場合はこのやり方がおすすめです。

バージョンを指定するなら↓

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>

最新バージョンを読み込むのは↓

<script src="https://cdn.jsdelivr.net/npm/vue"></script>


ESモジュールを使うなら↓

<script type="module">
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.esm.browser.js'
</script>

Webpack

案件やプロジェクトで使う場合はこのやり方がおすすめです。

$ vue init webpack my-project

途中enterを押してrouterをインストールするか聞かれますのでy(YES)もしくはn(NO)を入力します。

cd my-project
npm run dev

scss

scss記法の場合もsassをインストールで大丈夫です。

npm install sass-loader node-sass --save-dev
<style lang="scss">
/* ここにSassを書きます */
</style>

langの値をscssにします。
これがわからず時間を消費したのでお気を付けください。

CLI

Vue CLIの最新版インストールは以下です。

npm install -g @vue/cli

Vue UI

Vue CLI 3からGUIのプロジェクト管理ツールが用意されており、ツールの画面からプロジェkつの作成やソースのビルドが行えます。

vue ui

f:id:funclur:20190608192121p:plain
プロジェクトの作成後→serve→タスクの実行→出力をクリック
でlocalhostのパスが表示されるのでそちらをクリックすればリンクされるので表示されます。
buildも同じようにタブをクリックして実行すればOKです。

コマンド入力しなくていいので楽です。