[PYTHON] Let's make a nervous breakdown app with Vue.js and Django-Rest-Framework [Part 2] ~ Vue setup ~
Vue.js settings
Install vue-cli to be able to use vue
(concentratio)concentratio$ npm install -g vue-cli
I will create a project with vue init, so install vue-init
(concentratio)concentratio$ npm install -g @vue/cli-init
Create a project for the front
Create a front directory " frontend``` "directly under the project root.
Enter "concentratio" only for the first question (project name setting), and enter all the subsequent questions.
(concentratio)concentratio$ $ vue init webpack frontend
Then it will be like this
concentratio #Project root directory
├── config
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── frontend #Front project (various things are made inside)
└── manage.py
Start vue.js development server
Go directly under the frontend directory and run `npm run server` to access [http: // localhost: 8080](http: // localhost: 8080).
(concentratio)concentratio$ frontend
(concentratio)frontend$ npm run dev
Make the browser start with npm run dev
frontend/config/index.js
.
..
...
autoOpenBrowser: true, //false → change to true
...
..
.
This will automatically launch the browser.
ESLint settings
Check Official and optionally rewrite the `frontend / .eslintrc.js` setting.
It can be quite stiff.
It's quite annoying to make it squeaky, but it's convenient because the developer's code is unified.
install prettier
(concentratio)frontend$ npm install --save prettier-eslint eslint-plugin-prettier eslint-config-prettier
Edit eslintrc.js
eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
...
..
.
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
// consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard',
'plugin:prettier/recommended' //Postscript
],
// required to lint *.vue files
plugins: [
'vue'
],
...
..
.
}
Make TypeScript available.
install typescript
(concentratio)frontend$ npm install --save [email protected]
Install ts-loader
(concentratio)frontend$ npm install --save [email protected]
- Since webpack is 3 series, ts-loader also has 3.5.0 corresponding to it.
Attach ts-loader correlation to webpack rules
Edit webpack.base.conf.js
frontend/build/webpack.base.conf.js
module.exports = {
...
..
.
resolve: {
extensions: ['.js', '.vue', '.json', '.ts'], // '.ts'Add
...
..
.
},
module: {
rules: [
...
..
.
//Add the following
{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
...
..
.
]
},
...
..
.
}
Create a d.ts file
Create a sfc.d.ts file directly under frontend / src and write the code.
frontend/src/sfc.d.ts
declare module "*" {
import Vue from 'vue'
export default Vue
}
Create tsconfig.json
Created directly under frontend.
frontend/tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"lib": [
"dom",
"es5",
"es2015.promise"
],
"module": "es2015",
"moduleResolution": "node",
"isolatedModules": false,
"target": "es5"
},
"include": [
"./src/**/*.ts"
]
}
Rewrite main.js to main.ts
First, edit webpack.base.conf.js
frontend/build/webpack.base.conf.js
.
..
...
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.ts' // main.js main.Change to ts
},
...
..
.
}
Rewrite router / index.js to index.ts
To eliminate the error in main.ts.
npm run dev OK if you can!
Install vuetify
Vue.js Material Design Component Framework. You can make a screen like that just by using this.
vue materialThere is also one that provides a material design component framework, but I do not recommend it because issues have been left unattended for a long time. .. ..
(concentratio)frontend$ npm install --save vuetify
If you add the --save option, the library information described in package.json will also be installed. Is it something like `` `pip3 install -r requirements.txt``` in Django? By sharing package.json, developers can install the same library.
Register vuetify as a plugin
frontend/src/main.ts
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";
import Vuetify from "vuetify"; //add to
import "vuetify/dist/vuetify.min.css"; //add to
Vue.config.productionTip = false;
Vue.use(Vuetify); //add to
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
vuetify: new Vuetify() //add to(※)
})
Enclose the div tag in App.vue with v-app
(The ʻid = "app" `that was originally attached to the div tag is written in the v-app)
App.vue
<template>
<v-app id="app">
<div>
<img src="./assets/logo.png ">
<router-view/>
</div>
</v-app>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Use Material Design components
App.vue
<template>
<v-app id="app">
<div>
<img src="./assets/logo.png ">
<router-view/>
<!--add to-->
<v-btn large color="primary">Material design button</v-btn>
</div>
</v-app>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
See here for a list of Material Design components
Try using vuetify's Material Design icon
I think that v-icon cannot be used for Vuetify 2.X series unless this is done.
$ npm install --save @mdi/font material-design-icons-iconfont
Added to main.ts
main.ts
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
import 'material-design-icons-iconfont/dist/material-design-icons.css' #add to
import '@mdi/font/css/materialdesignicons.css' #add to
Vue.config.productionTip = false
Vue.use(Vuetify);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
vuetify: new Vuetify(),
})
After that, use the v-icon tag to display your favorite icon!
Create top page
Create PlayScreen.vue
concentratio #Project root directory
├── config
│ ├── ...
│
├── frontend
│ ├── ...
│ ├── ..
│ ├── .
│ └── views
│ └──PlayScreen.vue
└── manage.py
If you do touch PlayScreen.vue from the command line, even if you type the source code in the created vue file, it will not read well, so it may be better to create it on the IDE?
PlayScreen.vue
<template>
<div>
top page
</div>
</template>
<script>
export default {
name: "PlayScreen"
}
</script>
Rewrite router / index.ts
index.ts
import Vue from 'vue'
import Router from 'vue-router'
import PlayScreen from '@/views/PlayScreen.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'PlayScreen',
component: PlayScreen
}
]
})
Recommended Posts