こんにちわ、ゆきねこです。
最近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件のコメント