Vue.jsのお勉強

●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

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ！🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします＞＜