https://gizumo-inc.github.io/vue_todo/sample/
※ サンプルは、下の「API用のサーバーの立ち上げ」をしないと正常に動きません。
クローンしたら下記コマンドで、パッケージのインストールをします。
npm i
インストールしたら、下記コマンドでクライアント側のソースコードのビルドとAPI用のサーバーの立ち上げをします。
コマンドは別タブで実行する必要があります。
# クライアント側のソースコードのビルド
npm run dev:watch
# API用のサーバーの立ち上げ
npm run dev:server
クローンしたての状態では、下記テキストが表示されます。
Welcome to Vue Todo Lesson!!
This is Lesson for Beginner of Frontend Engineer.
Todoの確認には、下記のようにファイルの変更をします。
ただ、こちらはカリキュラムを通して完成させてもらうものなので、正常には動きません。
import Vue from 'vue';
// import VueRouter from 'vue-router';
// import routes from 'TodoRouterDir/routes';
// import routes from 'TodoVuexDir/routes';
// import store from 'TodoVuexDir/store';
// import routes from 'VuexSample/routes';
// import store from 'VuexSample/store';
import '../scss/global.scss';
// import myApp from './first';
import myApp from 'TodoDir';
// import myApp from 'TodoRouterDir';
// import myApp from 'TodoVuexDir';
// import myApp from 'VuexSample';
// Vue.use(VueRouter);
// const router = new VueRouter({
// routes: routes,
// mode: 'history',
// });
new Vue({
el: '#app',
// router: router,
// store: store,
render: h => h(myApp),
// render: h => h(myApp), は↓の書き方を短くしたもの
// render: function (createElement) {
// return createElement(myApp)
// }
});
vue-routerを使ったTodoの確認には、下記のようにファイルの変更をします。
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from 'TodoRouterDir/routes';
// import routes from 'TodoVuexDir/routes';
// import store from 'TodoVuexDir/store';
// import routes from 'VuexSample/routes';
// import store from 'VuexSample/store';
import '../scss/global.scss';
// import myApp from './first';
// import myApp from 'TodoDir';
import myApp from 'TodoRouterDir';
// import myApp from 'TodoVuexDir';
// import myApp from 'VuexSample';
Vue.use(VueRouter);
const router = new VueRouter({
routes: routes,
mode: 'history',
});
new Vue({
el: '#app',
router: router,
store: store,
render: h => h(myApp),
// render: h => h(myApp), は↓の書き方を短くしたもの
// render: function (createElement) {
// return createElement(myApp)
// }
});
33行目の// historyApiFallback: true,
のコメントを外します。
設定ファイルは./.eslintrc
になります。
44~50行目の下記のコメントを外します。
// {
// test: /\.(jsx?|vue)$/,
// enforce: 'pre',
// exclude: /node_modules/,
// loader: 'eslint-loader',
// options: { failOnError: false }
// },