[Vue.js] Vue.js 설치 및 실행, 접속 방법

0. 구동 환경

Ubuntu 19.04.

 

1. Vue.js 설치 방법

nodejs(npm) 설치(1)

$ apt install nodejs

nodejs(npm) 설치(2)

$ apt install npm

vue 설치

$ npm install vue

 

2. vue-cli 설치

Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI이다. Vue CLI를 통해 vue 명령어를 사용할 수 있게 되고, 빠른 프로젝트 생성 및 관리가 가능하다.

vue-cli 설치 방법(1)

$ npm install -g @vue/cli

vue-cli 설치 방법(2)

$ yarn global add @vue/cli

vue 명령 살펴보기

root@ubuntu:~# vue
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

 

3. vue를 이용한 프로젝트 생성

프로젝트 생성시 vue-cli를 설치해두었으면 생각보다 편하게 설치가 가능하다. 물론 인터넷이 되어야 한다는 전제가 있다.

공식 템플릿을 이용한 프로젝트 생성

$ vue init webpack [my-project-name]

github 저장소에서 프로젝트 가져오기

$ vue init [username/reposigory_name] [my-project-name]

 

4. vue 프로젝트 실행

프로젝트를 생성하였으면, 간단하게 실행해볼 수 있다.

실행 명령어(1)

$ npm run dev

실행 명령어(2)

$ npm start

npm start와 npm run dev와 같은 명령어로 서버를 구동할 수 있다.

물론 구동된 서버는 기본적으로 로컬호스트에서만 접근이 가능하다.

 

5. vue 프로젝트 외부에서 접근하기 위한 config 수정

프로젝트를 구동하는 곳은 VMware라는 전제하에 외부의 Windows 환경에서 구동하고 싶었다. 그런데 VMware 내부에서는 접근이 가능하였으나, 외부에서는 접근이 안 되는 것을 확인하여, config 파일이 어딨는지 삽질하면서 다음과 같은 힌트를 얻었다.

root@ubuntu ~/VueJSProject/01 > npm run dev

> 01@1.0.0 dev /root/VueJSProject/01
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 1 10% building modules 3/7 modules 4 active ...dules/webpack/hot/log-apply-result.js

위의 파일에서 build/webpack.dev.conf.js에 config가 있는가 싶어서 살펴보았지만 다른 파일의 내용을 보라고 나타나 있었다. 그리고 좀 더 찾아보니 config 아래에 있는 index.js 파일에서 localhost에 대한 내용을 찾았다.

/* 
config/index.js
*/

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    //host: 'localhost', // can be overwritten by process.env.HOST
    host: '0.0.0.0'
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-```