Vue.js Einstellungen

Installieren Sie vue-cli, um vue zu verwenden

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

Erstellen Sie ein Projekt mit vue init, installieren Sie also vue-init

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

Erstellen Sie ein Projekt für die Front

Erstellen Sie ein Front-Verzeichnis " Frontend```" direkt unter dem Projektstamm. Geben Sie "konzentratio" nur für die erste Frage ein (Festlegen des Projektnamens) und geben Sie alle nachfolgenden Fragen ein.

(concentratio)concentratio$ $ vue init webpack frontend

Dann wird es so sein

concentratio #Projektstammverzeichnis
├── config
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── frontend #Frontprojekt (verschiedene Dinge werden im Inneren gemacht)
└── manage.py

Starten Sie den vue.js-Entwicklungsserver

Gehen Sie direkt in das Frontend-Verzeichnis und führen Sie `npm run server `aus, um auf [http: // localhost: 8080](http: // localhost: 8080) zuzugreifen.

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

Lassen Sie den Browser mit npm run dev starten

`frontend/config/index.js`


.
..
...
    autoOpenBrowser: true, //false → auf true ändern
...
..
.

Dadurch wird der Browser automatisch gestartet.

ESLint-Einstellungen

Überprüfen Sie Official und schreiben Sie optional die Einstellung `frontend / .eslintrc.js `neu. Es kann ziemlich steif sein. Es ist ziemlich ärgerlich, es robust zu machen, aber es ist praktisch, weil der Code des Entwicklers einheitlich ist.

Schöner installieren

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

Bearbeiten Sie 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' //Nachtrag
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  ...
  ..
  .
}

Stellen Sie TypeScript zur Verfügung.

Installieren Sie Typoskript

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

Installieren Sie den ts-loader

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

Da es sich bei dem Webpack um eine 3er-Serie handelt, entspricht dem ts-loader auch 3.5.0.

Fügen Sie die Ts-Loader-Korrelation den Webpack-Regeln hinzu

Bearbeiten Sie webpack.base.conf.js

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


module.exports = {
  ...
  ..
  .
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts'], // '.ts'Hinzufügen
    ...
    ..
    .
  },
  module: {
    rules: [
      ...
      ..
      .
      //Fügen Sie Folgendes hinzu
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      }
      ...
      ..
      .
    ]
  },
  ...
  ..
  .
}

Erstellen Sie eine d.ts-Datei

Erstellen Sie eine sfc.d.ts-Datei direkt unter frontend / src und schreiben Sie den Code.

`frontend/src/sfc.d.ts`


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

Erstellen Sie tsconfig.json

Erstellt direkt unter dem Frontend.

`frontend/tsconfig.json`


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

Schreiben Sie main.js in main.ts um

Bearbeiten Sie zunächst webpack.base.conf.js

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


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

Schreiben Sie router / index.js in index.ts um

Um den Fehler in main.ts zu beseitigen.

npm run dev OK wenn möglich!

Installieren Sie vuetify

Vue.js Framework für Materialdesignkomponenten. Sie können einen solchen Bildschirm einfach damit erstellen.

vue materialEs gibt auch Materialien, die ein Materialdesign-Komponenten-Framework bereitstellen. Wir empfehlen es jedoch nicht, da Probleme lange Zeit unbeaufsichtigt blieben. .. ..

(concentratio)frontend$ npm install --save vuetify

Mit der Option --save werden auch die in package.json enthaltenen Bibliotheksinformationen installiert. Ist es so etwas wie `` `pip3 install -r require.txt``` in Django? Durch die Freigabe von package.json können Entwickler dieselbe Bibliothek installieren.

Registrieren Sie vuetify als 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"; //hinzufügen
import "vuetify/dist/vuetify.min.css"; //hinzufügen

Vue.config.productionTip = false;

Vue.use(Vuetify); //hinzufügen

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

Fügen Sie das div-Tag in App.vue mit v-app ein (Die ursprünglich an das div-Tag angehängte id =" app " ist in der v-App geschrieben.)

`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>

Verwenden Sie Materialdesignkomponenten

`App.vue`


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

      <!--hinzufügen-->
      <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>

Eine Liste der Materialkonstruktionskomponenten finden Sie hier

Versuchen Sie es mit dem Materialdesign-Symbol von vuetify

Ich denke, dass "v-icon" nicht für die Vuetify 2.X-Serie verwendet werden kann, wenn dies nicht getan wird.

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

Zu main.ts hinzugefügt

`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' #hinzufügen
import '@mdi/font/css/materialdesignicons.css' #hinzufügen

Vue.config.productionTip = false

Vue.use(Vuetify);

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

Verwenden Sie danach das V-Icon-Tag, um Ihr Lieblingssymbol anzuzeigen!

Top-Seite erstellen

Erstellen Sie PlayScreen.vue

concentratio #Projektstammverzeichnis
├── config
│   ├── ...
│
├── frontend
│   ├── ...
│   ├── ..
│   ├── .
│   └── views
│         └──PlayScreen.vue
└── manage.py

Wenn Sie in der Befehlszeile "PlayScreen.vue" berühren, wird der Quellcode in der erstellten Vue-Datei nicht gut gelesen, sodass es möglicherweise besser ist, ihn in der IDE zu erstellen.

`PlayScreen.vue`


<template>
  <div>
oberste Seite
  </div>
</template>

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

Schreiben Sie router / index.ts neu

`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
    }
  ]
})

<< Teil 1 | Teil 3

[PYTHON] Lassen Sie uns mit Vue.js und Django-Rest-Framework [Teil 2] ~ Vue setup ~ eine nervenschwächende App erstellen

Vue.js Einstellungen

Installieren Sie vue-cli, um vue zu verwenden

Erstellen Sie ein Projekt mit vue init, installieren Sie also vue-init

Erstellen Sie ein Projekt für die Front

Starten Sie den vue.js-Entwicklungsserver

Lassen Sie den Browser mit npm run dev starten

frontend/config/index.js

ESLint-Einstellungen

Schöner installieren

Bearbeiten Sie eslintrc.js

eslintrc.js

Stellen Sie TypeScript zur Verfügung.

Installieren Sie Typoskript

Installieren Sie den ts-loader

Fügen Sie die Ts-Loader-Korrelation den Webpack-Regeln hinzu

frontend/build/webpack.base.conf.js

Erstellen Sie eine d.ts-Datei

frontend/src/sfc.d.ts

Erstellen Sie tsconfig.json

frontend/tsconfig.json

Schreiben Sie main.js in main.ts um

frontend/build/webpack.base.conf.js

Schreiben Sie router / index.js in index.ts um

Installieren Sie vuetify

Registrieren Sie vuetify als Plug-In

frontend/src/main.ts

App.vue

Verwenden Sie Materialdesignkomponenten

App.vue

Versuchen Sie es mit dem Materialdesign-Symbol von vuetify

main.ts

Top-Seite erstellen

Erstellen Sie PlayScreen.vue

PlayScreen.vue

Schreiben Sie router / index.ts neu

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`