2019年01月14日

Vue CLIを使ってVueの環境を作成する

まずはvue-cliをグローバルにインストール

npm install -g vue-cli


インストール内容を exec $SHELL -l で反映すればvueコマンドが利用できるので -h オプションでヘルプを表示してみましょう

exec $SHELL -l
vue -h


vue init コマンドでプロジェクトを作成

vue init webpack-simple vue-cli-sample


インストールができたらディレクトリに移動してnpmのインストールと実行を行います

cd vue-cli-sample
npm install
npm run dev


http://localhost:8080/ に移動するとVueプロジェクトが実行されているのを確認できます。

src/App.js のmsgなどを変更するとhttp://localhost:8080/ も変更されるのを確認することができます。

<script>
export default {
name: 'app',
data () {
return {
msg: 'Vue CLIを使ってVueの環境を作成する'
}
}
}
</script>


posted by ねこまんま at 15:32 | テクニック | 更新情報をチェックする