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

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]

Puisque webpack est une série 3, ts-loader a également 3.5.0 correspondant.

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>

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

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

Paramètres de Vue.js

Installez vue-cli pour utiliser vue

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

Créer un projet pour la façade

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

Faire démarrer le navigateur avec npm run dev

frontend/config/index.js

Paramètres ESLint

Installer plus joli

Modifier eslintrc.js

eslintrc.js

Rendre TypeScript disponible.

Installer dactylographié

Installez ts-loader

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

frontend/build/webpack.base.conf.js

Créer un fichier d.ts

frontend/src/sfc.d.ts

Créer tsconfig.json

frontend/tsconfig.json

Réécrire main.js en main.ts

frontend/build/webpack.base.conf.js

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

Installez vuetify

Enregistrer vuetify en tant que plug-in

frontend/src/main.ts

App.vue

Utiliser des composants de conception de matériaux

App.vue

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

main.ts

Créer une page d'accueil

Créer PlayScreen.vue

PlayScreen.vue

Réécrire router / index.ts

index.ts

`frontend/config/index.js`

`eslintrc.js`

`frontend/build/webpack.base.conf.js`

`frontend/src/sfc.d.ts`

`frontend/tsconfig.json`

`frontend/build/webpack.base.conf.js`

`frontend/src/main.ts`

`App.vue`

`App.vue`

`main.ts`

`PlayScreen.vue`

`index.ts`