Créons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 2] ~ Configuration de Vue ~

<< Partie 1 | Partie 3 >>

Paramètres de Vue.js

Installez vue-cli pour utiliser vue

(concentratio)concentratio$ npm install -g vue-cli

Créez un projet avec vue init, alors installez vue-init

(concentratio)concentratio$ npm install -g @vue/cli-init

Créer un projet pour la façade

Créez un répertoire frontal " frontend```" directement sous la racine du projet. Entrez "concentratio" uniquement pour la première question (définissant le nom du projet), et entrez toutes les questions suivantes.

(concentratio)concentratio$ $ vue init webpack frontend

Alors ce sera comme ça

concentratio #Répertoire racine du projet
├── config
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend #Projet avant (diverses choses sont faites à l'intérieur)
└── manage.py

Démarrer le serveur de développement vue.js

Allez directement sous le répertoire du frontend et exécutez npm run server` '' pour accéder à [http: // localhost: 8080](http: // localhost: 8080).

(concentratio)concentratio$ frontend
(concentratio)frontend$ npm run dev

image.png

Faire démarrer le navigateur avec npm run dev

frontend/config/index.js


.
..
...
    autoOpenBrowser: true, //faux → changer en vrai
...
..
.

Cela lancera automatiquement le navigateur.

Paramètres ESLint

Vérifiez Officiel et réécrivez éventuellement le paramètre `frontend / .eslintrc.js `. Cela peut être assez raide. C'est assez ennuyeux de le rendre robuste, mais c'est pratique car le code du développeur est unifié.

Installer plus joli

(concentratio)frontend$ npm install --save prettier-eslint eslint-plugin-prettier eslint-config-prettier

Modifier 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'
  ],
  ...
  ..
  .
}

Rendre TypeScript disponible.

Installer dactylographié

(concentratio)frontend$ npm install --save [email protected]

Installez ts-loader

(concentratio)frontend$ npm install --save [email protected]

Joindre la corrélation ts-loader aux règles Webpack

Modifier webpack.base.conf.js

frontend/build/webpack.base.conf.js


module.exports = {
  ...
  ..
  .
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'], // '.ts'Ajouter
    ...
    ..
    .
  },
  module: {
    rules: [
      ...
      ..
      .
      //Ajoutez ce qui suit
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
      ...
      ..
      .
    ]
  },
  ...
  ..
  .
}

Créer un fichier d.ts

Créez un fichier sfc.d.ts directement sous frontend / src et écrivez le code.

frontend/src/sfc.d.ts


declare module "*" {
  import Vue from 'vue'
  export default Vue
}

Créer tsconfig.json

Créé directement sous frontend.

frontend/tsconfig.json


{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015.promise"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "isolatedModules": false,
    "target": "es5"
  },
  "include": [
    "./src/**/*.ts"
  ]
}

Réécrire main.js en main.ts

Tout d'abord, éditez webpack.base.conf.js

frontend/build/webpack.base.conf.js


.
..
...
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.ts' // main.js main.Changer en ts
  },
  ...
  ..
  .
}

Réécrire router / index.js en index.ts

Pour éliminer l'erreur dans main.ts.

npm run dev OK si possible!

Installez vuetify

Framework de composants de conception matérielle Vue.js. Vous pouvez créer un écran comme celui-là simplement en utilisant ceci.

vue materialIl existe également des matériaux qui fournissent un cadre de composant de conception matérielle, mais nous ne le recommandons pas car les problèmes ont été laissés sans surveillance pendant une longue période. .. ..

(concentratio)frontend$ npm install --save vuetify

L'option --save installe également les informations de bibliothèque contenues dans package.json. Est-ce quelque chose comme `` pip3 install -r requirements.txt '' dans Django? En partageant package.json, les développeurs peuvent installer la même bibliothèque.

Enregistrer vuetify en tant que plug-in

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"; //ajouter à
import "vuetify/dist/vuetify.min.css"; //ajouter à

Vue.config.productionTip = false;

Vue.use(Vuetify); //ajouter à

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  vuetify: new Vuetify() //ajouter à(※)
})

Insérez la balise div dans App.vue avec v-app (Le ʻid = "app" `qui était à l'origine attaché à la balise div est écrit dans la 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>

Utiliser des composants de conception de matériaux

App.vue


<template>
  <v-app id="app">
    <div>
      <img src="./assets/logo.png ">
      <router-view/>

      <!--ajouter à-->
      <v-btn large color="primary">Bouton de conception matérielle</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>

image.png

Voir ici pour une liste des composants de conception matérielle

Essayez d'utiliser l'icône de conception matérielle de Vuetify

Je pense que v-icon ne peut pas être utilisé pour la série Vuetify 2.X à moins que cela ne soit fait.

$ npm install --save @mdi/font material-design-icons-iconfont

Ajouté à 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' #ajouter à
import '@mdi/font/css/materialdesignicons.css' #ajouter à

Vue.config.productionTip = false

Vue.use(Vuetify);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  vuetify: new Vuetify(),
})

Après cela, utilisez la balise v-icon pour afficher votre icône préférée!

Créer une page d'accueil

Créer PlayScreen.vue

concentratio #Répertoire racine du projet
├── config
│   ├── ...
│
├── frontend
│   ├── ...
│   ├── ..
│   ├── .
│   └── views
│         └──PlayScreen.vue
└── manage.py

Si vous touchez PlayScreen.vue depuis la ligne de commande, même si vous tapez le code source dans le fichier vue créé, il ne se lira pas bien, il est donc préférable de le créer sur l'IDE?

PlayScreen.vue


<template>
  <div>
haut de page
  </div>
</template>

<script>
export default {
  name: "PlayScreen"
}
</script>

Réécrire 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
    }
  ]
})

<< Partie 1 | Partie 3

Recommended Posts

Créons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 2] ~ Configuration de Vue ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 1] ~ Django setup ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 3] ~ Implémentation de la faiblesse nerveuse ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 6] ~ Authentification utilisateur 2 ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 5] ~ Authentification des utilisateurs ~
Faisons une application qui affaiblit les nerfs avec Vue.js et Django-Rest-Framework [Partie 4] ~ Construction MySQL et migration de base de données avec Docker ~
Créons une application Mac avec Tkinter et py2app
Essayez de créer un jeu simple avec Python 3 et iPhone
Créons une application capable de rechercher des images similaires avec Python et Flask Part1
Créons une application capable de rechercher des images similaires avec Python et Flask Part2
Faisons une interface graphique avec python.
Faisons une rupture de bloc avec wxPython
Faisons un graphe avec python! !!
Faisons un spacon avec xCAT
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 1
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 2
Créez un thermomètre avec Raspberry Pi et rendez-le visible sur le navigateur Partie 4
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 3
Créez une application de scraping avec Python + Django + AWS et modifiez les tâches
Faisons une application WEB pour l'annuaire téléphonique avec flacon Partie 4
Faisons un jeu de shiritori avec Python
Faisons la voix lentement avec Python
Faisons un langage simple avec PLY 1
Créez un framework Web avec Python! (1)
Faisons une IA à trois yeux avec Pylearn 2
Créez une application de bureau avec Python avec Electron
Faisons un bot Twitter avec Python!
Créez un framework Web avec Python! (2)
Fabriquez un thermomètre avec Raspberry Pi et rendez-le visible sur le navigateur Partie 3
Remplaçons UWSC par Python (5) Faisons un robot
Créez une application graphique native avec Py2app et Tkinter
[Pratique] Créez une application Watson avec Python! # 2 [Fonction de traduction]
[Pratique] Créez une application Watson avec Python! # 1 [Discrimination linguistique]
[Jouons avec Python] Créer un livre de comptes de ménage
Comment faire un jeu de tir avec toio (partie 1)
Facilitons un peu la gestion des dépendances avec pip
Essayez de créer une grille sphérique avec Rhinoceros / Grasshopper / GHPython
[Super facile] Faisons un LINE BOT avec Python.
Créons un client de socket Web avec Python. (Authentification par jeton d'accès)
[Pratique] Créez une application Watson avec Python! # 3 [Classification du langage naturel]
Créez un plug-in tky2jgd sans praticité avec QGIS Partie 2
Associez Python Enum à une fonction pour la rendre appelable
Créons un diagramme PRML avec Python, Numpy et matplotlib.
Créer un plug-in tky2jgd sans praticité avec QGIS Partie 1
Créez une application météo résidente dans la barre de menus Mac avec des croupes!
Créez une application de tableau d'affichage à partir de zéro avec Django. (Partie 2)
Créez une application de tableau d'affichage à partir de zéro avec Django. (Partie 3)
Créez des RPG 2D avec Ren'Py (3) - Boutique d'objets et d'outils
Faisons un diagramme sur lequel on peut cliquer avec IPython
Fabriquez un thermomètre BLE et obtenez la température avec Pythonista3