vue-cli3で開発環境を作成してみた

概要

背景

vue-cliのGithubのリリースノートを見たら、たまたまv3がある事を知った。正式リリース直前のようだし先立って使って見ようかなと思った。

ちょい書き

やった事をただ書くだけだが、v2と比較しながらなるべく初心者の方にも分かりやすく書こうと思う。

また、新機能としてvue uiというのが追加されたみたいなので、以下の2通りの開発環境の作成方法がある。

  1. コマンドラインで作成する方法(vue create [プロジェクト名])
  2. uiで作成する方法(vue ui)

この記事が少々長くなってしまったのでuiで作成する方法は別記事にする。

はじめに

Node.js

Node.jsに含まれるnpmというパッケージ管理ツールを使用するので、インストールしていない方はこの記事を見てインストールをして下さい。

キーワード

Vue-cli

vue.jsをコマンドラインで操作する為の公式?ツールです。

手順

1. vue-cli2のアンインストール

v2がインストールしてあったので、念の為アンインストールをしておく。cli2でもcli3でもvueコマンドを使うので、
どっちもインストールされていると良く分からなくなる。共存させる方法があるのかは全く分からない。

 

2. vue-cli3のインストール

vue-cli2までは、npm install -g vue-cliだったがv3からはこのようにインストールするらしい。

 
vueコマンドでちゃんとインストール出来たか確認。

2018/07/01現在の最新はrc版のようだ。(RC版については記事の一番下のURL)

3. プロジェクトの作成

 
構成の質問をされる。

 
どんなものがあるか確認する為、Manuallyを選択。すると、

こんな画面が現れる。これどうやってチェック付けるんだ?と思ったら数字の入力出来た。(他の方法もあるのか?)
設定する内容はv2とほぼ同じだなーと思ったので、結局白目でEnter連打。

cli2でのプロジェクトの作成は、vue initを使っていたので、ここも異なる点の一つだ。
また、webpackがデフォルトになった(?)のでテンプレート名も指定が必要なくなったようだ?。
そんな事を考えながらコーヒーを飲んでたらプロジェクトの作成が終わっていた。

作成されたプロジェクト直下のファイル等を確認してみる。

 
buildとconfigディレクトリが無い。無いぞ。cli2の時にあった、webpackのconfigファイルを探しまくったがやはり無い。
どうやって開発や本番環境の設定するんだと思って公式ページを見ていたら、自分で設定ファイル(vue.config.js)を用意する必要があるらしい。
まぁこのvue.config.js関しては、後日じっくりと調べてみようと思うので後回し。

理解が正しいか分からないが、要するにbuildとconfigが無くなってコンパクトになった。

4.実行

早速実行してみる。

 
ブラウザからlocalhost:8080に接続して次のような画面が表示されたら無事完了。

ちなみに使用出来るコマンドは、プロジェクト直下のpackege.jsonのscript部分に記述されている。
npm run の後にその部分に書かれている文字を入力すれば動く。

実際にpakage.jsonを見てみた。

 
各コマンドをざっくり説明しておく。
npm run serve:開発サーバーの起動
npm run build:本番環境にアップロードするファイルのビルド
npm run lint:Linter(プログラムの構文をチェックするパッケージ)でエラーチェック

ビルドについて

ビルドの仕方とサーバーへのアップロード

とりあえずビルドを動かしてみる。

 
プロジェクト直下にdistというディレクトリが生成されてその中にhtml,css,jsが入っている。
デプロイする時はこれらのファイルをサーバーにアップロードするだけで良い。

昔は、htmlやcss、javascriptをそのままサーバーにアップロードしていたが、イマドキはこのようにビルドするのが一般的。

ビルドする理由について

理由はいくつか存在するが、主に以下の2つだと思う。

1. ES2015(ES6)をコンパイルする為
世の中は、昔のJavascriptよりも便利で新しい規格:ES6というもので開発していこうと言う流れが出来た。
しかし、当初はまだブラウザが対応できていなかった為、前の規格で動かす必要があるため変換が必要になった。

現在は、結構対応してきているようだが、まだすべてのブラウザでは動く訳では無いらしい。

2. 圧縮をする為
デプロイしたコードは人間が読めなくても問題は無いので、単純に圧縮しても良いという事になる。
ファイルサイズが小さい程、ページの読み込み等も早くなるので圧縮は行いたい。

cli2に戻したいとき

1. vue-cli3をアンインストール

2. vue-cli2をインストール

 
共存のやり方が分からないので、しょうもない説明になってしまったが一応これで戻せる。

まとめ

  • cli2とcli3でちょくちょくコマンドが変わった。
  • 環境の設定はvue.config.jsというファイルを用意しなくてはいけなくなった。
  • その代わり、プロジェクト全体がコンパクトになった。
  • 内部的に、どの辺がバージョンアップしたのかまだ分からないので調べてみようと思った。

参考にした・関連するサイトのURL

VueCLI公式ページ
VueCLI公式ページ(vue.config.jsについて)
ECMAScript2015(ES6)の対応ブラウザの一覧
RC版とは

3,669 件のコメント

  • El hooligan del Liverpool que avergonzo Barcelona la vuelve a liar con un ‘Steward
    El mismo personaje que se dedico a empujar gente a la fuente de Barcelona la ha vuelto a liar esta vez bajandole los pantalones a un steward.

  • It is the best time to make some plans for the future
    and it’s time to be happy. I have read this post and if
    I could I wish to suggest you few interesting things or tips.
    Maybe you can write next articles referring to this article.
    I want to read more things about it!

  • We are a group of volunteers and opening a new
    scheme in our community. Your site offered us with useful information to work on. You’ve performed
    an impressive task and our entire community will likely be grateful to you.

  • Its such as you learn my thoughts! You seem to grasp a lot about this,
    such as you wrote the ebook in it or something. I believe that you just can do with some % to power the message home a little bit,
    however instead of that, that is excellent blog.

    An excellent read. I’ll certainly be back.

  • I absolutely love your site.. Pleasant colors & theme.
    Did you develop this web site yourself? Please reply back as
    I’m attempting to create my own personal site and
    would love to know where you got this from or what the theme is
    named. Thanks!

  • It is appropriate time to make some plans for the future and it is time to be
    happy. I have read this post and if I could I wish to suggest you some interesting things or suggestions.

    Maybe you could write next articles referring to this article.
    I want to read even more things about it!

  • I’ll right away take hold of your rss as I can’t find your e-mail subscription hyperlink or newsletter service.

    Do you have any? Kindly permit me know so that I may subscribe.

    Thanks.

  • I drop a comment whenever I like a post on a site or I have something to valuable to contribute to
    the conversation. It is a result of the passion communicated in the post I looked at.
    And after this post The Growing Trends in Content Theft: Image Theft,
    Feed Scraping, and Website Hijacking ? Lorelle on WordPress.
    I was excited enough to post a thought 🙂 I actually do have a
    couple of questions for you if it’s allright. Could it be only
    me or do a few of these responses appear as if they are left by
    brain dead individuals? 😛 And, if you are posting on other online social sites,
    I’d like to follow you. Would you make a list the complete urls of all your community sites
    like your twitter feed, Facebook page or linkedin profile?

  • I’ve been surfing online more than three hours today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my opinion, if all site owners and bloggers made good content
    as you did, the net will be a lot more useful than ever before.

  • I have been surfing online greater than 3 hours these days, yet I by no means found any fascinating article
    like yours. It is lovely price enough for me. In my view, if all
    site owners and bloggers made good content as you did, the internet will probably be a
    lot more useful than ever before.

  • It is the best time to make some plans for the long run and it is time to
    be happy. I have learn this publish and if I
    could I want to recommend you some fascinating things or suggestions.
    Perhaps you could write subsequent articles relating
    to this article. I want to learn even more things about it!

  • I’ve been surfing on-line more than 3 hours these days, yet
    I never found any fascinating article like yours. It is lovely worth sufficient for me.
    In my opinion, if all site owners and bloggers made excellent content material as you probably did, the net will probably be a lot more useful than ever before.

  • Howdy! Someone in my Facebook group shared this site with us
    so I came to look it over. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers!
    Fantastic blog and terrific design.

  • I have been surfing online more than 2 hours today, yet I never found any
    interesting article like yours. It is pretty worth enough for me.
    In my opinion, if all web owners and bloggers made good content as you did,
    the internet will be a lot more useful than ever before.

  • I have been browsing online more than three hours nowadays,
    yet I by no means found any interesting article like yours.
    It’s pretty price sufficient for me. In my opinion, if all web owners and bloggers made just right content as you
    probably did, the net will likely be much more useful
    than ever before.

  • Hi, I do believe this is an excellent web site.
    I stumbledupon it 😉 I may revisit yet again since I book-marked it.
    Money and freedom is the greatest way to change, may you be rich and continue to help others.

  • I have been browsing online more than 4 hours today, yet I never found any interesting
    article like yours. It’s pretty worth enough for me.
    Personally, if all web owners and bloggers made
    good content as you did, the net will be a lot more useful than ever before.

  • It is appropriate time to make some plans for the longer
    term and it’s time to be happy. I’ve learn this post and if I may I desire to suggest you few attention-grabbing
    things or tips. Maybe you can write subsequent articles relating to this article.
    I want to read even more issues about it!

  • I have been surfing online more than 2 hours today, yet I never found
    any interesting article like yours. It is
    pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as you did, the web will be much more
    useful than ever before.

  • Thanks alot : ) for your post. I’d really like to write my opinion that the price of car insurance will vary from one scheme to another, given that there are so many different facets which give rise to the overall cost. One example is, the make and model of the automobile will have a tremendous bearing on the charge. A reliable older family vehicle will have a more economical premium than just a flashy fancy car.

  • I have been surfing online more than 3 hours today, yet
    I never found any interesting article like yours.

    It is pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did,
    the net will be a lot more useful than ever before.

  • It is perfect time to make some plans for the future and it’s time to be happy.
    I have read this post and if I could I want to suggest you few interesting things or suggestions.

    Maybe you could write next articles referring to this article.
    I wish to read even more things about it!

  • It is appropriate time to make a few plans for the long
    run and it’s time to be happy. I’ve learn this
    publish and if I may I wish to recommend you some fascinating things or suggestions.
    Maybe you can write subsequent articles relating to this article.
    I want to learn even more things about it!

  • I have been browsing online more than 4 hours today, yet I never found
    any interesting article like yours. It is pretty worth enough for me.
    In my view, if all web owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

  • Hello there! This post could not be written much better!
    Looking through this article reminds me of my previous roommate!
    He constantly kept talking about this. I most certainly will forward this post
    to him. Pretty sure he’s going to have a very good read.
    Thank you for sharing!

  • Its such as you learn my thoughts! You seem to grasp so much about this,
    like you wrote the guide in it or something. I believe that you just
    could do with a few percent to power the message home a
    little bit, however other than that, this is wonderful blog.

    An excellent read. I will certainly be back.

  • I’ve been surfing on-line more than three hours nowadays, but I never found any attention-grabbing article like yours.
    It’s pretty price enough for me. In my opinion,
    if all site owners and bloggers made just right content
    as you did, the web will likely be a lot more helpful than ever before.

  • Some tips i have observed in terms of computer system memory is that there are specifications such as SDRAM, DDR and the like, that must match the features of the motherboard. If the pc’s motherboard is fairly current while there are no computer OS issues, improving the memory literally takes under 1 hour. It’s among the easiest pc upgrade methods one can visualize. Thanks for discussing your ideas.

  • I’ve been browsing online greater than 3 hours these days, but I by no means found any fascinating article like yours.
    It is beautiful value sufficient for me. In my opinion, if all webmasters and bloggers made just right content as you did, the internet
    shall be much more useful than ever before.

  • Good day! I could have sworn I’ve visited this site before but after going through some of the posts I realized it’s new
    to me. Anyhow, I’m definitely delighted I discovered
    it and I’ll be bookmarking it and checking back frequently!

  • I have learned some new elements from your internet site about desktops. Another thing I have always considered is that computer systems have become a product that each home must have for several reasons. They offer convenient ways in which to organize households, pay bills, shop, study, tune in to music as well as watch tv programs. An innovative technique to complete every one of these tasks is by using a notebook. These desktops are mobile, small, potent and portable.

  • It is appropriate time to make some plans for the future and it is time to be happy.

    I have learn this post and if I may I want to suggest you few fascinating things or suggestions.
    Maybe you can write next articles relating to this article.
    I wish to learn even more issues approximately it!

  • I will right away grasp your rss feed as
    I can’t to find your e-mail subscription hyperlink or newsletter service.
    Do you have any? Please let me know in order that I could subscribe.

    Thanks.

  • I realized more new stuff on this fat loss issue. One particular issue is that good nutrition is highly vital whenever dieting. A massive reduction in fast foods, sugary food, fried foods, sweet foods, beef, and bright flour products may perhaps be necessary. Holding wastes harmful bacteria, and toxic compounds may prevent aims for losing fat. While specific drugs for the short term solve the matter, the nasty side effects usually are not worth it, and they also never present more than a temporary solution. This can be a known proven fact that 95 of fad diets fail. Many thanks for sharing your notions on this site.

  • I’m impressed, I must say. Seldom do I come across a blog that’s equally educative and entertaining, and
    let me tell you, you have hit the nail on the head. The problem is
    something which not enough folks are speaking intelligently about.

    I’m very happy that I stumbled across this during my hunt for something regarding this.

  • I’m truly enjoying the design and layout of your site. It’s a very easy on the
    eyes which makes it much more pleasant for me to come
    here and visit more often. Did you hire out a designer to create your theme?
    Great work!

  • Most presidents would go out of their way to avoid such sensitive topics at a moment of extreme political stress. In Trump’s case they may deepen his already intense unpopularity in Britain ahead of his arrival for a three-day stay on Monday but enhance his global reputation as an unpredictable, disruptive influence.

  • The biggest event will take place in Hong Kong, the only place on Chinese soil where mass commemorations are held. A candlelit vigil has been held in Victoria Park every year since 1990, with hundreds of thousands attending during key anniversaries way

  • Today, I went to the beach front with my children. I found a sea shell and
    gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to
    her ear and screamed. There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is totally off topic but I
    had to tell someone!

  • I was wondering if you ever considered changing the page layout of
    your blog? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of
    content so people could connect with it better. Youve got an awful lot of text for only having 1 or two images.
    Maybe you could space it out better?

  • The biggest event will take place in Hong Kong, the only place on Chinese soil where mass commemorations are held. A candlelit vigil has been held in Victoria Park every year since 1990, with hundreds of thousands attending during key anniversaries way

  • Does your site have a contact page? I’m having problems
    locating it but, I’d like to shoot you an email.
    I’ve got some ideas for your blog you might be interested in hearing.
    Either way, great site and I look forward
    to seeing it expand over time.

  • The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

  • The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

  • The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

  • Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  • Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  • Hands down, Apple’s app store wins by a mile. It’s a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I’m not sure I’d want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.

  • The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

  • Hands down, Apple’s app store wins by a mile. It’s a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I’m not sure I’d want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.

  • Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  • Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  • The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

  • Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  • The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

  • Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  • Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  • The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

  • This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of “neighbors” will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune “Social” is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose.

  • I’ll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.)

  • Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  • Hands down, Apple’s app store wins by a mile. It’s a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I’m not sure I’d want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.

  • Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  • I’ll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.)

  • The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

  • This is getting a bit more subjective, but I much prefer the Zune Marketplace. The interface is colorful, has more flair, and some cool features like ‘Mixview’ that let you quickly see related albums, songs, or other users related to what you’re listening to. Clicking on one of those will center on that item, and another set of “neighbors” will come into view, allowing you to navigate around exploring by similar artists, songs, or users. Speaking of users, the Zune “Social” is also great fun, letting you find others with shared tastes and becoming friends with them. You then can listen to a playlist created based on an amalgamation of what all your friends are listening to, which is also enjoyable. Those concerned with privacy will be relieved to know you can prevent the public from seeing your personal listening habits if you so choose.

  • Hands down, Apple’s app store wins by a mile. It’s a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I’m not sure I’d want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.

  • I’ll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.)

  • Between me and my husband we’ve owned more MP3 players over the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to discover how well-designed and fun to use the underappreciated (and widely mocked) Zunes are.

  • Apple now has Rhapsody as an app, which is a great start, but it is currently hampered by the inability to store locally on your iPod, and has a dismal 64kbps bit rate. If this changes, then it will somewhat negate this advantage for the Zune, but the 10 songs per month will still be a big plus in Zune Pass’ favor.

  • Hands down, Apple’s app store wins by a mile. It’s a huge selection of all sorts of apps vs a rather sad selection of a handful for Zune. Microsoft has plans, especially in the realm of games, but I’m not sure I’d want to bet on the future if this aspect is important to you. The iPod is a much better choice in that case.