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-```