未分類

Vue.jsのお勉強

| by 優

 

●Udemy
https://www.udemy.com/course/vuejs-firebase/learn/lecture/14098728#overview

●演習フォルダ
/Users/kanehiroyuu/Desktop/develop.nosync/Vue-Study/vuejs-firebase/sample-app

Vue Cliの導入

 

$ npm install -g @vue/cli@3.5.0

 

vuejs-firebase $ vue -V
3.5.0

 

vuejs-firebase $ vue create sample-app

 

Vue CLI v3.5.0
┌───────────────────────────┐
│  Update available: 4.5.7  │
└───────────────────────────┘
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

 

Vue CLI v3.5.0
┌───────────────────────────┐
│  Update available: 4.5.7  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

 

Vue CLI v3.5.0
┌───────────────────────────┐
│  Update available: 4.5.7  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pr
e-processors, Linter
? Use history mode for router? (Requires proper server setup for index fa
llback in production) (Y/n)

 

Vue CLI v3.5.0
┌───────────────────────────┐
│  Update available: 4.5.7  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pr
e-processors, Linter
? Use history mode for router? (Requires proper server setup for index fa
llback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are sup
ported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

 

Vue CLI v3.5.0
┌───────────────────────────┐
│  Update available: 4.5.7  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pr
e-processors, Linter
? Use history mode for router? (Requires proper server setup for index fa
llback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are sup
ported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

 

Vue CLI v3.5.0
┌───────────────────────────┐
│  Update available: 4.5.7  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pr
e-processors, Linter
? Use history mode for router? (Requires proper server setup for index fa
llback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are sup
ported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle
all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

 

 

Vue CLI v3.5.0
┌───────────────────────────┐
│  Update available: 4.5.7  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pr
e-processors, Linter
? Use history mode for router? (Requires proper server setup for index fa
llback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are sup
ported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle
all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (U
se arrow keys)
❯ In dedicated config files
  In package.json

 

? Save this as a preset for future projects? (y/N)

 

🚀  Invoking generators...
📦  Installing additional dependencies...

added 60 packages from 39 contributors and audited 1305 packages in 12.435s
found 0 vulnerabilities

⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project sample-app.
👉  Get started with the following commands:

 $ cd sample-app
 $ npm run serve

 

$ cd sample-app
$ npm run serve

 

http://localhost:8080/

 

npm run serveした時に行われることは、package.jsonに定義がある

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
・・・

 

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

h関数はcreateElement関数のAlias

h(App)はAppコンポートネントをcreateElementしてレンダリングするという意味

Appコンポーネント = src/App.vue

 

  • src/views/About.vue
  • src/views/Home.vue

Aboutコンポーネント、Homeコンポーネント

 

 

コンポーネント

  • テンプレート
  • JavaScript
  • CSS

を書く

ファイルをコンポーネントとして分割することで再利用できるようにする。

 

Addressesコンポーネントを作る

src/components/Addresses.vue

<template>
    <div>
      <h1>アドレス帳</h1>
    </div>
</template>>

<script>
export default {
  name: 'Addresses'
}
</script>

<style scoped lang="scss">

</style>>

 

利用してみる

src/views/Home.vue

<template>
  <div class="home">
    <Addresses/>
  </div>
</template>

<script>
// @ is an alias to /src
import Addresses from '@/components/Addresses.vue'

export default {
  name: 'home',
  components: {
    Addresses
  }
}
</script>

 

Vue Router

 

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

routerが利用されている

 

new Vue({
  router, ←●省略形
  router: router, ←●本当はこう。router変数にrouterが渡されている
  store,
  render: h => h(App)
}).$mount('#app')

 

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

 

 

 Vuetifyの導入

 

$ vue add vuetify

 

? Choose a preset: (Use arrow keys)
❯ Default (recommended)
  Prototype (rapid development)
  Configure (advanced)

 

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     .browserslistrc
     .eslintrc.js
     .gitignore
     README.md
     babel.config.js
     package-lock.json
     package.json
     public/favicon.ico
     public/index.html
     src/App.vue
     src/assets/logo.png
     src/assets/logo.svg
     src/components/Addresses.vue
     src/components/HelloWorld.vue
     src/main.js
     src/plugins/vuetify.js
     src/router/index.js
     src/store/index.js
     src/views/About.vue
     src/views/Home.vue
     vue.config.js

   You should review these changes with git diff and commit them.

 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

 

 

ダウングレード

sample-app $ vue add vuetify@0.5

📦  Installing vue-cli-plugin-vuetify@0.5...

+ vue-cli-plugin-vuetify@0.5.0
removed 6 packages, updated 1 package and audited 1308 packages in 17.182s
found 0 vulnerabilities

✔  Successfully installed plugin: vue-cli-plugin-vuetify@0.5

Plugin vue-cli-plugin-vuetify@0.5 does not have a generator to invoke

 

package.json

  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
-   "vuetify": "^2.2.11",
+   "vuetify": "^1.5.5",
    "vuex": "^3.4.0"
  },

 

$ npm i

 

 

関連記事 - More from my site -

“Vue.jsのお勉強”への4件のコメント

  1. はじめまして。ほけつと申します。（ハンネです）
    エンジニアほぼ未経験のオッさんです。
    個人で稼げるを目標にエンジニアを目指そうと思っています（現在全く別種のサラリーマンです）
    優さんの1/100でも知識、技術を身につけていきたいのですが何から始めてよいやら彷徨っております。
    youtubeを拝見して「これならわかる シリーズ」を2冊購入し読み始めたのですが、先にプログラミングを覚えた方が良いのか、マークアップ言語からやった方が良いのか、訳が分からなくなってしまって•••
    インフラエンジニアも将来的に厳しいとおっしゃっていますし、今からやるならコレっていうのはありますか。
    駄文失礼しました。
    因みにこの記事の内容全くわかりません。（凡人以下です）

    返信

    1. >個人で稼げるを目標にエンジニアを目指そうと思っています
      おすすめしないですが、
      Uber Eats感覚で月数万を目標で副業で稼ぐならWeb制作でWordPress案件するのが良いかと。

      それ以外は一旦転職して業務経験を得る必要があります。

      フリーターからまず正社員になるという意味でならインフラエンジニアになるのはおすすめですが、
      >個人で稼げるを目標にエンジニアを目指そうと思っています（現在全く別種のサラリーマンです）
      定職につかれているということなので、
      独立可能なエンジニアになるのであれば、
      JavaかLaravelかRailsといったバックエンド言語・フレームワークを学んで転職用のポートフォリオを作成し、
      Wantedlyを経由してバックエンドエンジニアを目指すと良いのではないでしょうか？

      行きたい会社の採用ページやGreenなどに登録して採用情報から利用している技術を見つけて、
      それを利用してポートフォリオを作ると良いです。

      >先にプログラミングを覚えた方が良いのか、マークアップ言語からやった方が良いのか、
      プログラミングでポートフォリオを作るのが良いです、
      その上で必要な時に必要な箇所のマークアップを学ぶでしょうか。

      私もCSSを厳密にはわかっていません、
      フロントエンドエンジニアでなければ、
      必要になったら学ぶという形で大丈夫です。

      返信

  2. ご返答ありがとうございます。
    とても参考になりました。
    フレームワークとはその言語を先に覚えてからやった方がいいですよね。（RailsだったらRubyを先に）

    とにかく動こうと思います。

    優さんのyoutube楽しみにしております。
    ありがとうございました。

    返信

    1. 頑張ってくださいね！

      >フレームワークとはその言語を先に覚えてからやった方がいいですよね。（RailsだったらRubyを先に）
      平行してやると良いと思います。
      私はRails詳しくないですが、
      最初の2日はRubyで基礎文法、
      その後はRailsでポートフォリオで問題ないはず。
      Railsでポートフォリオ作りながらRubyの文法でわからない時にRubyを都度学ぶ感じが良いかも？

      後は自分でWordPressサーバを運用して技術をアウトプットしながら、
      サーバ運用技術も身に着ける + 継続努力の証明になるのでと良いかもですね。

      エンジニア転職成功したら教えてくれると嬉しいです🐱✨

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）