Nodejs, Vue in WSL and VSCODE

I feel annoyed sometimes doing the same tasks repeatedly. Installing the development environment is not technically difficult, as long as I follow the guidelines. However, I tend to forget the steps I took before. I own a Surface Pro 9 with an ARM CPU and Windows ARM, which tends to cause issues. Although Windows ARM was launched many years ago, the native applications have not been launched enough to use. In this text, I'm going to write how to set up NodeJS, VUE for VSCODE, and WSL, Windows Subsystem for Linux.

1. Install the lastest nvm

https://github.com/nvm-sh/nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

2. Install env in WSL

SurfacePro9:~$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
SurfacePro9:~$ nvm --version
  0.35.3

SurfacePro9:~$ nvm install 20.11.0  
                           ~~~~~~~
                           refer to the official website
SurfacePro9:~$ nvm ls
  ->     v20.11.0
           system
  default -> 20.11.0 (-> v20.11.0)
  node -> stable (-> v20.11.0) (default)
  stable -> 20.11 (-> v20.11.0) (default)


SurfacePro9:~$ curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
                                                        ~~~~
                                                 same as installed version
SurfacePro9:~$ sudo apt install nodejs -y
  Reading package lists... Done
  Building dependency tree... Done
  Reading state information... Done

SurfacePro9:~$ npm install -g npm@latest
SurfacePro9:~$ sudo apt install build-essential

3. Set up VSCODE

In terminal of VSCODE

SurfacePro9:~/NodeJS/TEST_01$ npm install -g @vue/cli

npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated apollo-datasource@3.3.2: The `apollo-datasource` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated apollo-server-plugin-base@3.7.2: The `apollo-server-plugin-base` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated apollo-server-errors@3.3.1: The `apollo-server-errors` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated apollo-server-types@3.8.0: The `apollo-server-types` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/server` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated apollo-server-env@4.2.1: The `apollo-server-env` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/utils.fetcher` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated apollo-reporting-protobuf@3.4.0: The `apollo-reporting-protobuf` package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the `@apollo/usage-reporting-protobuf` package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.
npm WARN deprecated subscriptions-transport-ws@0.11.0: The `subscriptions-transport-ws` package is no longer maintained. We recommend you use `graphql-ws` instead. For help migrating Apollo software to `graphql-ws`, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws    For general help using `graphql-ws`, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md
npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

Install Extension:

• Vetur (Vue tooling for VS Code)
• HTML CSS Support (CSS Intellisense for HTML)
• Vue 3 Snippets by hollowtree (A Vue.js 3 And Vue.js 2 Code Snippets Extension)

🚩 "vue/cli" is commonly used for "vue create MyProject" like "python -m django startproject MyProject ."

4. npm packages

(1) vue create project_name

(2) Install bootstrap

• npm install bootstrap (공식 웹사이트 다운로드 등에 명령어 나옴)
• main.js
  import 'bootstrap'
  import 'bootstrap/dist/css/bootstrap.min.css'

(3) Install vue-router@4

• npm install vue-router@4
• router.js

 import { createWebHistory, createRouter } from "vue-router";
 import OOOO from './components/OOOO.vue'; 

  
  const routes = [{
    path: "/경로",
    component: OOOO,
  }];

  const router = createRouter({
    history: createWebHistory(),
    routes,
  });

  export default router; 

• main.js

  import listRouter from './router.js'
  createApp(App).use(listRouter).mount('#app')

• App.vue

  <router-view :blogData="blogData"  ></router-view>

(4) Install axios

• npm install axios
• *.vue

  import axios from 'axios';