public:computer:nodejs_vuetify_express_mongodb

starting node.js + vuetify + express.js + mongoDB

1. 에디터 설치 ( atom, vs code)
2. 노드 설치 (node.js) -> brew install node
3.install express.js
4.modify express
5.routing on express
6.install vuetify
7.express + vuetify
8.modify vuetify
9.add page on vuetify
10.connect router between express and vue
11.using vuetify component
12.layout of vuetify
13.install mongoDB
14.install mongoos

에디터 설치 (vscode)
=> 확장 기능 설치 : Debugger for Chrome, npm 

// 설정을 이 파일에 넣어서 기본 설정을 덮어씁니다.
{
// Use ZSH as the integrated terminal shell.
"terminal.integrated.shell.osx" : "/bin/zsh",
"terminal.integrated.fontFamily": "Meslo LG M for Powerline"
}


노드설치 (node.js)
=> vue-cli 설치 : $ npm install --global vue-cli $npm install -g @vue/cli
=> vue 프로젝트 생성, 실행 : $ vue init webpack <my-project>, $ cd <my-project>, $ npm install, $ npm run dev <OR> $ npm start



-javascript
-github
-spa(single page application)

$ npm install -g @vue/cli

$ node -v
>=8.9
  $ brew update
  $ brew upgrade node
  $ npm update -g npm

  $ sudo npm cache clean -f
  $ sudo npm install -g n
  $ sudo n stable
$ vue -V


$ vue create my-app
$ cd my-app

$ vue add vuetify

$ npm --save vue-router

$ npm run serve <OR> $ yarn serve

$ npm install --save vuetify vuetify/dist/


.vscode/launch.json
{
   "version": "0.2.0",
   "configurations": [
       {
           "type": "chrome",
           "request": "launch",
           "name": "Chrome",
           "program": "${workspaceRoot}/src\\main.js",
           "cwd": "${workspaceRoot}",
           "outFiles": ["${workspaceRoot}/**/*.vue"],
           "url": "http://localhost:8080",
           "sourceMaps": true
       }
   ]
}

  • public/computer/nodejs_vuetify_express_mongodb.txt
  • Last modified: 2021/03/17 14:57
  • by alex