Merge pull request #70 from nikukyugamer/development

v2.0.0

._.browserslistrc → .browserslistrc

@@ -1,2 +1,3 @@
 > 1%
 last 2 versions
+not dead

.circleci/config.yml

@@ -3,9 +3,17 @@ jobs:
   build:
     working_directory: ~/repo
     docker:
-      - image: circleci/node:14.7.0
+      - image: circleci/node:14.9.0
+      # https://github.com/cypress-io/cypress-docker-images
+      - image: cypress/base:12
+        environment:
+          TERM: xterm
     steps:
       - checkout
+      - run:
+          name: Install base packages (for Cypress)
+          command: |
+            sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
       - run:
           name: Update npm
           command: |
@@ -22,13 +30,22 @@ jobs:
       - run:
           name: yarn install
           command: yarn install
+      - run:
+          name: Install Cypress
+          command: npx cypress install
       - save_cache:
           key: dependency-cache-{{ checksum "yarn.lock" }}
           paths:
             - ./node_modules
+            # Cypress
+            - ~/.cache
       - run:
           name: Execute Jest
-          command: yarn test
+          command: yarn test:unit
+      - run:
+          # https://cli.vuejs.org/core-plugins/e2e-cypress.html
+          name: Execute Cypress
+          command: yarn test:e2e --headless
       # - run:
       #     name: Code coverage
       #     command: './node_modules/.bin/nyc report --reporter=text-lcov'
@@ -40,3 +57,7 @@ jobs:
           destination: coverage
       - store_test_results:
           path: test-results.xml
+      - store_artifacts:
+          path: cypress/videos
+      - store_artifacts:
+          path: cypress/screenshots

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint"
+  ],
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+  },
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+};

.gitignore

@@ -2,6 +2,9 @@
 node_modules
 /dist
 
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+
 # local env files
 .env.local
 .env.*.local
@@ -10,6 +13,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea

.node-version

@@ -1 +1 @@
-14.7.0
+14.9.0

README.md

@@ -1,24 +1,58 @@
-# challenging-vue-cli
+# Challenging Vue CLI
+- Vue CLI v4.5.4
+- Vue.js 3.x (Preview)
 
-## Project setup
-```
-yarn install
-```
+# $ vue create
+```sh
+$ vue create challenging-vue-cli
 
-### Compiles and hot-reloads for development
-```
-yarn serve
-```
+Vue CLI v4.5.4
+? Please pick a preset: Manually select features
+? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
+? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
+? Use class-style component syntax? No
+? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
+? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
+? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
+? Pick a linter / formatter config: Prettier
+? Pick additional lint features: Lint on save
+? Pick a unit testing solution: Jest
+? Pick an E2E testing solution: Cypress
+? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
+? Save this as a preset for future projects? No
 
-### Compiles and minifies for production
-```
-yarn build
-```
+Vue CLI v4.5.4
+✨  Creating project in /FOOBAR/challenging-vue-cli.
+⚙️  Installing CLI plugins. This might take a while...
 
-### Lints and fixes files
-```
-yarn lint
+yarn install v1.22.5
+info No lockfile found.
+[1/4] 🔍  Resolving packages...
+[2/4] 🚚  Fetching packages...
+[3/4] 🔗  Linking dependencies...
+[4/4] 🔨  Building fresh packages...
+success Saved lockfile.
+✨  Done in 229.61s.
+🚀  Invoking generators...
+📦  Installing additional dependencies...
+
+yarn install v1.22.5
+[1/4] 🔍  Resolving packages...
+[2/4] 🚚  Fetching packages...
+[3/4] 🔗  Linking dependencies...
+[4/4] 🔨  Building fresh packages...
+success Saved lockfile.
+✨  Done in 35.66s.
+⚓  Running completion hooks...
+
+📄  Generating README.md...
+
+🎉  Successfully created project challenging-vue-cli.
+👉  Get started with the following commands:
+
+ $ cd challenging-vue-cli
+ $ yarn serve
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+# Docs
+- [@vue/cli\-plugin\-e2e\-cypress \| Vue CLI](https://cli.vuejs.org/core-plugins/e2e-cypress.html)

babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

cypress.json

@@ -0,0 +1,3 @@
+{
+  "pluginsFile": "tests/e2e/plugins/index.js"
+}

jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
+  transform: {
+    "^.+\\.vue$": "vue-jest"
+  }
+};

package.json

@@ -3,41 +3,44 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "watch": "vue-cli-service serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "test": "echo"
+    "test:unit": "vue-cli-service test:unit",
+    "test:e2e": "vue-cli-service test:e2e",
+    "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": ">=3.6.4",
-    "vue": ">=2.6.11"
+    "core-js": ">=3.6.5",
+    "register-service-worker": ">=1.7.1",
+    "vue": ">=3.0.0-0",
+    "vue-router": ">=4.0.0-0",
+    "vuex": ">=4.0.0-0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": ">=4.4.6",
-    "@vue/cli-plugin-eslint": ">=4.2.0",
-    "@vue/cli-service": ">=4.5.2",
-    "babel-eslint": ">=10.0.3",
+    "@types/jest": ">=24.0.19",
+    "@typescript-eslint/eslint-plugin": ">=2.33.0",
+    "@typescript-eslint/parser": ">=2.33.0",
+    "@vue/cli-plugin-babel": ">=4.5.0",
+    "@vue/cli-plugin-e2e-cypress": ">=4.5.0",
+    "@vue/cli-plugin-eslint": ">=4.5.0",
+    "@vue/cli-plugin-pwa": ">=4.5.0",
+    "@vue/cli-plugin-router": ">=4.5.0",
+    "@vue/cli-plugin-typescript": ">=4.5.0",
+    "@vue/cli-plugin-unit-jest": ">=4.5.0",
+    "@vue/cli-plugin-vuex": ">=4.5.0",
+    "@vue/cli-service": ">=4.5.0",
+    "@vue/compiler-sfc": ">=3.0.0-0",
+    "@vue/eslint-config-prettier": ">=6.0.0",
+    "@vue/eslint-config-typescript": ">=5.0.2",
+    "@vue/test-utils": ">=2.0.0-0",
     "eslint": ">=6.7.2",
-    "eslint-plugin-vue": ">=6.1.2",
-    "jest": ">=26.3.0",
-    "vue-template-compiler": ">=2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
+    "eslint-plugin-prettier": ">=3.1.3",
+    "eslint-plugin-vue": ">=7.0.0-0",
+    "prettier": ">=1.19.1",
+    "sass": ">=1.26.5",
+    "sass-loader": ">=8.0.2",
+    "typescript": ">=3.9.3",
+    "vue-jest": ">=5.0.0-0"
+  }
 }

public/index.html

@@ -12,7 +12,6 @@
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <p>今日も良いお天気ですね！</p>
     <!-- built files will be auto injected -->
   </body>
 </html>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/App.vue

@@ -1,35 +1,32 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-    <p>こんにちは、Vue.js!</p>
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view />
   </div>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style scoped>
-/* 'scoped' を付与したことで、index.html に書いてある <p></p> にはスタイルが適用されていない */
-p {
-  border: 1px solid red;
-  background-color: yellow;
-}
-
+<style lang="scss">
 #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;
+}
+
+#nav {
+  padding: 30px;
+
+  a {
+    font-weight: bold;
+    color: #2c3e50;
+
+    &.router-link-exact-active {
+      color: #42b983;
+    }
+  }
 }
 </style>