様々な方法でvueをインストールできるので、主要な方法についてまとめてみた。
vue-cli
vue-cliを使ってvue環境を構築。
https://cli.vuejs.org/guide/prototyping.html
// 必要なパッケージをインストール
npm install -g @vue/cli @vue/cli-service-global
ファイルを作成する
App.vue
<template>
<h1>Hello!</h1>
</template>
開発サーバを起動
vue serve
npm + webpack
webpackを使用してvue環境を構築するには若干の手間がかかる。webpackに慣れていれば細かなカスタマイズができる。ただ、webpackのバージョンが変わったりすることによって今までの設定では動かなくなったりするので、注意が必要。
// プロジェクトを作成
npm init
// vue をインストール
npm install vue
// webpack をインストール
npm install -D webpack webpack-cli webpack-dev-server
// loader をインストール
npm install -D vue-loader vue-template-compiler
// JavaScript compiler をインストール
npm install -D babel-loader @babel/core @babel/preset-env
package.jsonの設定
package.json
{
"name": "vue-npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"eslint": "^7.23.0",
"vue": "^2.6.12"
},
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/preset-env": "^7.13.12",
"babel-loader": "^8.2.2",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --config ./webpack.config.js"
},
"author": "",
"license": "ISC"
}
webpackの設定
webpack.config.js
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
mode: "development",
// エントリポイントのファイル
entry: "./src/index.js",
output: {
// 出力先のディレクトリ
path: path.resolve(__dirname, "./dist"),
// 出力ファイル名
filename: "bundle.js",
},
devServer: {
// webpackの扱わないファイル(HTMLや画像など)が入っているディレクトリ
contentBase: path.resolve(__dirname, "public"),
port: 3000,
host: "0.0.0.0"
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
resolve: {
extensions: [".js", ".vue"],
alias: {
"vue$": "vue/dist/vue.esm.js"
}
},
plugins: [
new VueLoaderPlugin()
],
};
vueファイルの作成
src/components/App.vue
<template>
<div>
<p>Hello, World</p>
</div>
</template>
jsファイルの作成
src/index.js
import Vue from "vue";
import App from "./components/App";
new Vue({
el: "#app",
components: { App },
template: "<app/>"
})
html作成
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue app</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
開発サーバを起動
npm start
cdn
スクリプト読み込み
https://jp.vuejs.org/v2/guide/installation.html#CDN
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue App</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
jsファイル
js/index.js
var app = new Vue({
el: "#app",
data: {
message: "Vue.js"
}
})