I'm frontend javascript beginner using npm.
I write this example project as I want to get easist simple project to learn vuejs.
- npm
- express-generator
- express
- connect-history-api-fallback
- vue-cli
- vuejs version 2.8.2
$ mkdir test_route_express
$ cd backend
$ npm install
$ DEBUG=backend:* npm start
Check npm start
http://localhost:3000
$ vue init webpack frontend
# Enter informations on the prompt
# Must enter 'Y' about the question 'vue-router'
$ cd frontend
$ npm install
$ npm run dev
Check npm run dev http://localhost:8080
- Remove this lines on this file,
frontend/config/index.js
...
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
...
- And add this lines
...
index: path.resolve(__dirname, '../../backend/public/index.html'),
assetsRoot: path.resolve(__dirname, '../../backend/public'),
...
- Add new component
frontend/src/components/Second.vue
<template>
<div>
<h1>Second page</h1>
</div>
</template>
<script>
export default {
created: function () {
console.log('created')
},
data: function () {
return {
movie: {}
}
}
}
</script>
- Change content on this file,
frontend/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Second from '@/components/Second'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{
path: '/second',
name: 'Second',
component: Second
}
]
})
- npm build
Now you have to compile vuejs
$ cd frontend
$ npm run build
You can see index.html
file in public
directory.
- Remove this lines on this file,
backend/routes/index.js
res.render('index', { title: 'Express' });
- And add this lines
res.sendFile(path.join(__dirname, '../public', 'index.html'))
$ cd backend
$ DEBUG=backend:* npm start