Vue.js - Webpack Template

11622 ワード
テキストリンク

01.Vue3 Webpack Template

  • webpackで作成したテンプレート設定Vue.js開発環境
  • Github-webpack-template-basic

    • 02.VSコードへのインポート

    $ npx degit JangJinWon/webpack-template-basic vue3-webpack-template
$ cd vue3-webpack-template
$ code . -r
  • リモート・リポジトリにvue3-webpack-templateというフォルダを作成し、VS Codeにインポートします.
  • 新しく作成されたvue3-webpack-templateフォルダに移動します.

    • 03.Vue.jsに変更


    3-1. srcフォルダの作成
  • プロジェクトルートにsrcフォルダを作成
  • ルートパスのjsフォルダを削除します.
    • 3-2.main.js, App.vueファイルの作成
    |フォルダに
  • src、main.jsファイルを作成します.
    • 3-3.vueのインストール
    $ npm i vue@next
  • App.vueコマンドを入力Vue.js最新の3バージョンをインストール
  • ブラウザおよび開発環境で正常に動作していることを確認し、インストール時に開発に依存しないでください.

    • 04.その他のパッケージのインストール

    $ npm i -D vue-loader@next vue-style-loader '@vue/compiler-sfc'
  • vue@next拡張子のファイルをプロジェクトで実際に管理するには、他の.vueに関連するパッケージをインストールする必要があります.
  • には、webpackがブラウザで実行可能なファイルに変換する3つの開発依存性がインストールされています.

    • 05.webpack.config.js

    // import
const path = require("path");
const HtmlPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader"); // vue

// export 
module.exports = {
  // parcel index.html
  // 파일을 읽어들이기 시작하는 진입점 설정
  entry: "./src/main.js",
  // 결과물(번들)을 반환하는 설정
  output: {
    // path: path.resolve(__dirname, "dist"), // dist의 절대경로를 반환
    // filename: "main.js",
    clean: true
  },

  module: {
    rules: [
      {
        // vue
        test: /\.vue$/, // .vue로 끝나는 확장자 파일을 검색하는 정규 표현식
        use: "vue-loader" // vue-loader 연결
      },

      {
        test: /\.s?css$/, // .scss 또는 .css확장자로 끝나는 파일을 찾는 정규 표현식
        use: [
          // vue
          "vue-style-loader", // vue 파일 내부에 있는 style 태그를 해석해서 동작시켜주는 패키지
          "style-loader", // main.css에 해석된 내용을 삽입하는 패키지
          "css-loader", // JS에서 CSS 파일을 해석하는 패키지
          "postcss-loader", // 공급업체 접두사를 적용해주는 패키지
          "sass-loader"
        ]
      },
      {
        test: /\.js$/,
        use: [
          "babel-loader"
        ]
      }
    ]
  },
  // 번들링 후 결과물의 처리 방식 등 다양한 플러그인을 설정
  plugins: [
    new HtmlPlugin({
      template: "./index.html"
    }),
    new CopyPlugin({
      patterns: [
        { from: "static" } // static 폴더안에 있는 내용들이 복사되어 dist폴더 안에 들어갈 수 있게 설정하는 옵션
      ]
    }),
    new VueLoaderPlugin() // vue
  ],

  devServer: {
    host: 'localhost'
  }
}
  • @vue/compiler-sfcの構成オプションを変更します.
  • テンプレートの内容のVue.js必要な部分を修正するだけでよい.

    • 06.試験項目


    6-1.App.vue
    <template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!!!'
    }
  }
}
</script>
    6-2.main.js
    import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
    6-3.index.html
    <body>
  <div id='app'></div>
</body>
    6-4.開発サーバを開く
    $ npm run dev
  • ページ上webpack.config.js正常出力時に完了します.
    • struts 2ファイルアップロードサイズの制限
    SQL-4週間、EXCELより楽