VueJS vue-cli 없이 설치하기

L·2022년 5월 12일
0

Vue.js without cli

목록 보기
2/2

1.📦 기본 패키지 구성

  • npm init -y 을 통해 기본 npm 개발 환경 생성.
  • 아래 명령어를 통해 vue 패키지 설치
  • webpack 패키지(webpack, webpack-cli, webpack-dev-server), babel 패키지(babel-loader, @babel/core, @babel/preset-env)와 vue파일을 컴파일링하고 번들링하는 패키지(vue-loader,vue-template-complier)는 개발에서만 사용하는 패키지라 -D 명령어를 이용해 설치. (+이후 html파일을 자동적으로 생성하는 html-webpack-plugin 패키지도 추가)

npm i vue
npm i -D vue-loader vue-template-compiler vue-style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env css-loader

  • ⭐️ 위의 명령어로 설치시 vue3가 설치되기 때문에 본인은 vue2를 사용하기 위해 아래와 같이 설치했음(vue-loader는 16버전 이상은 vue 3만 지원)

npm i vue@2.6.14
npm i -D vue-loader@15.9.3

2.🛠vue 실행파일 구성

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
  • App.vue
<template>
  <div id="app">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World',
    };
  },
};
</script>

<style>
#app {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: blue;
}
</style>
  • src/main.js(진입점)
import Vue from 'vue';
import App from '../App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

3.🛠 webpack 설정

  • webpack.config.js
    1. vue-loader.vue확장자 파일을 자바스크립트모듈로 변환하는 패키지.
    2. html-webpack-plugin은 html파일을 동적으로 생성하여, template속성에 값의경로에 있는 파일을 기본으로 번들링된 output결과가 index.html 로 자동적으로 나옴.
    3. babel-loader는 ES6의 문법을 ES5문법으로 변환하는 패키지.(여기서는 같이 쓰이는 플러그인은 babel의 핵심인 @babel/core와 ES6의 문법을 ES5문법으로 변환하는 플러그인인 @babel/preset-env같이 사용)
      4.css-loader,vue-style-loader.vue파일 안에 있는 CSS속성들을 파일로가져와 html파일에 넣어주는 패키지.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' },
      { test: /\.vue$/, use: 'vue-loader' },
      { test: /\.css$/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
    new VueLoaderPlugin(),
  ]
};
  • package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "start": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "vue": "^2.6.14"
  }
}

4.실행 및 결과 🎉

npm run start

참고

0개의 댓글