こんにちわ、ゆきねこです。

最近vue.jsの環境構築を行なっていたので順番をまとめようと思います。

初期設定

まず、プロジェクトのディレクトリを作ってvueとwebpackの設定をします。

mkdir {project_name}
cd {project_name}
// ディレクトリ、ファイルの作成
mkdir dist
touch dist/index.html
mkdir src
mkdir src/components
touch src/index.js
touch src/App.vue

// package.jsonの作成
npm init -y
// vueの設定
npm install --save-dev vue vue-loader vue-router vue-template-compiler
// webpackのツールをインストール
npm install --save-dev webpack webpack-cli webpack-dev-server

// webpackの設定ファイルの作成
touch webpack.config.js

webpackの設定

次にwebpackの設定を行います

webpack.config.jsに以下のコードを書きます。

const path = require('path')
module.exports = {
  // モードの設定
  // developmemt or production
  mode: 'developmemt',
  // エントリーポイント
  entry: './src/index.js',
  output: {
    // 出力先フォルダ
    path: path.resolve(__dirname, 'dist'),
    // 出力先ファイル名
    filename: 'main.js'
  }
}

エントリーポイントで起点となるファイルを指定します。

そしてプロジェクト直下にdistディレクトリが作成されて、buildされたファイルをmain.jsとして出力するように設定しています。

次にコマンドでbuildできるようにpackage.jsonを書き換えます

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
}

ここにbuildを加えて以下のようにします

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build":"npx webpack --config ./webpack.config.js"
}

そうすると、以下のコマンドでbuildが使えるようになります

npm run build

Loaderの設定

次にローダを設定します。

ローダーはvueファイルをimportするためのライブラリ?みたいな感じです。

設定方法はwebpack.config.jsにモジュールを追記していきます。

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
  }
}

 

App.vueの設定

vueファイルにはコンポーネントを書いて行きます

App.vueはベースとなる感じでsrc直下に置いてますが、基本的にコンポーネントは./src/components/に置いていきます

<template>
  <div>
    <p>テスト</p>
  </div>
</template>

ひとまずこんな感じです

index.jsの設定

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  el:'#app',
  components: { App },
  template:'</App>',
  render:h=>h(App)
})

htmlの設定

distの下のhtmlファイルをいじります。

最初はこんな感じでよろしいかと思います。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>テスト</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- js -->
<script src="https://unpkg.com/vue@2.5.17"></script>
</head>
<body>
    <div id="app">
    <div>
    <script src="./main.js"></script>
</body>
</html>

vueのソースファイルはheadで読み込みますが、main.jsはidがappのあとに読み込みます。

たしかhtmlは上から読み込んでいきますが、

devサーバの設定

以下のコマンドでサーバをインストールします

npm install --save-dev webpack-dev-server

次にインストールしたサーバをwebpackに登録します

先ほどのwebpack.config.jsファイルに追記します

module.exports = {
  output: {
    ・・・
  },
  devServer: {
    contentBase:'./dist'
  }
}

そして、devサーバをnpmのコマンドで動かせるように以下をpackage.jsonに追記します

"start": "webpack-dev-server --open"

以下のコマンドを叩いてlocalhost:8080にアクセスすると画面が開きます。

 

カテゴリー: その他もろもろ

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です