サンプル格納

sample-vue.js / sample-vue-component01

Browse code サンプル格納 master
0 parent commit 1882b82298e0302fdd6ca0c79c936dd60f587df7 Yoshimune Saito authored on 26 Jan 2020

Patch

Showing 9 changed files

Ignore Space Show notes View README.md 0 → 100644
# sample vue-cliでプロジェクトを作成。 ``` vue create sample ``` Gitで扱う際はnode_modulesやpackage-lock.jsonなどは入れず、 npm installで初期化する。 --- ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run serve ``` ### Compiles and minifies for production ``` npm run build ``` ### Run your tests ``` npm run test ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).

Ignore Space Show notes View

README.md 0 → 100644

Ignore Space Show notes View package.json 0 → 100644
{ "name": "sample", "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.4.3", "vue": "^2.6.10" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0", "babel-eslint": "^10.0.3", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "vue-template-compiler": "^2.6.10" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }, "browserslist": [ "> 1%", "last 2 versions" ] }

Ignore Space Show notes View

package.json 0 → 100644

Ignore Space Show notes View public/favicon.ico 0 → 100644

Ignore Space Show notes View public/index.html 0 → 100644
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>sample</title> </head> <body> <noscript> <strong>We're sorry but sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> </body> </html>

Ignore Space Show notes View src/.DS_Store 0 → 100644
Not supported

Ignore Space Show notes View src/App.vue 0 → 100644
<template> <div id="app"> <table> <thead> <tr> <th>No</th> <th>name</th> <th>desc</th> </tr> </thead> <tbody> <Row v-for="i in items" :key="i" :item="i" /> </tbody> </table> </div> </template> <script> import Row from "./components/Row.vue"; export default { name: "app", components: { Row }, data() { return { items: [ { no: 1, name: "Taro", desc: "hoge" }, { no: 2, name: "Ken", desc: "fuga" }, { no: 3, name: "Jiro", desc: "piyo" } ] }; } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } table, tr, td, th { border: solid 1px #000000; border-collapse: collapse; } </style>

Ignore Space Show notes View

src/App.vue 0 → 100644

export default {
  name: "app",
  components: {
    Row
  },
  data() {
    return {
      items: [
        {
          no: 1,
          name: "Taro",
          desc: "hoge"
        },
        {
          no: 2,
          name: "Ken",
          desc: "fuga"
        },
        {
          no: 3,
          name: "Jiro",
          desc: "piyo"
        }
      ]
    };
  }
};
</script>

Ignore Space Show notes View src/assets/logo.png 0 → 100644

Ignore Space Show notes View src/components/Row.vue 0 → 100644
<template> <tr> <td>{{ item.no }}</td> <td>{{ item.name }}</td> <td>{{ item.desc }}</td> </tr> </template> <script> export default { props: { item: Object } }; </script> <style></style>

Ignore Space Show notes View src/main.js 0 → 100644
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

Show line notes below