vueを導入する
Vue.jsとは、UIを構築するためのフレームワークの1つです。表示する内容をかんたんに、動的に変更でき、データや機能の管理に優れています。
ここでは、従来のOptoins APIでの使い方を紹介します。
実は、Vue.jsの公式サイトでも利用方法がかなり詳しく書かれています。こちらの説明と公式の説明両方を活用して理解を深めていきましょう!
環境構築
まずは環境を作りましょう! おすすめはNode.jsを利用してnpmとwebpackをあわせた導入です。
手動でインストール
以下のコマンドでインストールできます。
npm i vue # ビルドに必要なもの npm i -D webpack webpack-cli @vue/compiler-sfc vue-loader vue-style-loader style-loader css-loader sass sass-loader
package.jsonの設定
コマンドでビルドをできるようにする設定で十分です。
{
// ...
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --mode development --watch --color --progress",
"watch-poll": "npm run watch -- --watch-options-poll=1000",
"test": "echo \"Error: no test specified\" && exit 1"
},
// ...
}
webpackの設定
webpack.config.jsには今回は次のような設定を利用します。
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");
const src = '/src/'
const dist = '/dist/'
module.exports = {
entry: {
app: src + 'app.js',
},
output: {
path: __dirname + dist,
filename: '[name].js'
},
plugins: [
new VueLoaderPlugin(),
new DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
}),
],
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js'
},
extensions: [
'.ts', '.js', '.vue',
],
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
},
{
test: /\.s[ac]ss$/,
use: [
'vue-style-loader',
{
loader: 'css-loader',
options: {
modules: true,
}
},
'sass-loader'
]
},
]
},
}
scssのビルドもついでに行っています。
.vueファイルをビルドする場合はmoduleやpluginの設定が必要になります。とはいえwebpack.config.jsonに上のテンプレを追加するだけなので簡単です。
aliasの設定をしておかないと毎度面倒なimport文を書くことになるので設定して起きましょう。
新しいバージョンのvueでは、__VUE_OPTIONS_API__と__VUE_PROD_DEVTOOLS__を明示したほうが良いです。__VUE_OPTIONS_API__をfalseにするとOptions APIが使えなくなるので、今回はtrueにしてください。
この時点でのディレクトリの構成はこうです。もちろん設定を変えれば全く同じである必要はありません。
project ├ dist\ ├ node_modules\ │ └ ... ├ src\ │ └ app.js ├ package.json ├ package-lock.json └ webpack.config.js
普通にscriptを読み込む
簡単なアプリケーションで済ませる場合は、以下のように普通にscriptを読む方法もありです。ただ、複雑なことは基本的に厳しいです。
<script src="https://unpkg.com/vue"></script>
本番環境では意図しないアップデートで不具合が起こるのを防ぐため、次のように特定のバージョンを利用することをおすすめします。
<script src="https://unpkg.com/vue@3.2.31"></script>
バージョンに関しては上の数値ではなく、実際の最新版を利用してください。
vue/cliを用いた導入
まずは@vue/cliを導入します。
npm i @vue/cli
導入したらアプリを新規作成します。
# myappは適当なアプリ名 npx vue create myapp
途中でvue2かvue3の選択が出るので、基本的には新しい方のvue3を選択しておきましょう。
これで構築完了です。
まとめ
vueは、基本的にNode.jsを用いて開発し、webpack等のモジュールバンドラーでビルドして利用するのを推奨します。その方がより大規模で複雑なアプリケーションを作りやすいためです。
導入したら早速作っていきましょう!
