Heim  >  Artikel  >  PHP-Framework  >  Teilen Sie die Konstruktionsmethode laravel8+vue3.0+element-plus

Teilen Sie die Konstruktionsmethode laravel8+vue3.0+element-plus

藏色散人
藏色散人nach vorne
2021-03-15 17:37:533820Durchsuche

zum Teilen mit Laravel8+Vue3.0+Element-Plus eingeführt. Ich hoffe, es wird Freunden helfen, die es brauchen!

Teilen Sie die Konstruktionsmethode laravel8+vue3.0+element-plusVorwort

Ich habe vue3.0 vor ein paar Tagen plötzlich entdeckt, hatte also einfach nichts zu tun und habe es ausprobiert.

Starten

Erstellen Sie das Laravel8-Projekt
composer create-project laravel/laravel laravel8 --prefer-dist
oder
laravel new laravel8
.

Installieren Sie laravel/ui
composer require laravel/ui
und führen Sie
php artisan ui vue
im Stammverzeichnis aus. Ändern Sie die Datei package.json
"devDependencies": {
      "@vue/compiler-sfc": "^3.0.7",
      "axios": "^0.21",
      "bootstrap": "^4.0.0",
      "jquery": "^3.2",
      "laravel-mix": "^6.0.6",
      "lodash": "^4.17.19",
      "popper.js": "^1.12",
      "postcss": "^8.1.14",
      "resolve-url-loader": "^3.1.2",
      "sass": "^1.20.1",
      "sass-loader": "^8.0.0",
      "vue": "^3.0.7",
      "vue-loader": "^16.1.0",
      "vue-template-compiler": "^2.6.10"
  },
  "dependencies": {
      "element-plus": "^1.0.2-beta.35",
      "vue-router": "^4.0.5"
  }
  1. Neuer Router. js
    require('./bootstrap');window.Vue = require('vue');window.VueRouter = require('vue-router');import routes from "./router"import axios from "axios"import ElementPlus from 'element-plus'const router = VueRouter.createRouter({
      history: VueRouter.createWebHashHistory(),
      routes,})import RootComponent from "./components/layouts/App"const app = Vue.createApp(RootComponent)app.config.globalProperties.$http=axios
    app.use(router)
      .use(ElementPlus);app.mount('#app')
  2. Neue App.vue (Element-Plus-offizielles Dokumentbeispiel)
    import Home from "./components/layouts/Home"export default [
      {path:'/',component: Home},]
  3. Erstellen Sie ein neues Home.vue
    <template>
      <el-container>
          <el-header>Header</el-header>
          <el-main><router-view></router-view></el-main>
          <el-footer>Footer</el-footer>
      </el-container></template><script>export default {}</script><style>.el-header, .el-footer {
      background-color: #B3C0D1;
      color: #333;
      text-align: center;
      line-height: 60px;}.el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;}.el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;}body > .el-container {
      margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {
      line-height: 260px;}.el-container:nth-child(7) .el-aside {
      line-height: 320px;}</style>
  4. app.scss und führen Sie die Element-Plus-CSS-Datei ein
    <template>
      <p>home</p></template><script>export default {
      methods:{
          cs(){
              axios.post("../index").then(function (response){
                  console.log(response);
              }).catch(function (error){
                  console.log(error);
              })
          }
      },
      mounted() {
          this.cs();
      }}</script><style scoped></style>
  5. Führen Sie den Befehl
    // Variables@import 'variables';// Bootstrap@import '~bootstrap/scss/bootstrap';// element-plus@import "~element-plus/lib/theme-chalk/index.css";
  6. Rendering
  7. aus
  8. Die Konsolenausgabe ist ein Axios-Post-Request-Test.
  9. Fertig!

Das obige ist der detaillierte Inhalt vonTeilen Sie die Konstruktionsmethode laravel8+vue3.0+element-plus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:learnku.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen