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

                                                        Ar Das Folgende wird von einer Tutorial-Kolumne von Laravel

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

Vorwort

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

Nach dem Login kopieren

oder

laravel new laravel8

Nach dem Login kopieren

.

composer require laravel/ui

php artisan ui vue

"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')

   Nach dem Login kopieren
2. Neue App.vue (Element-Plus-offizielles Dokumentbeispiel)

   import Home from "./components/layouts/Home"export default [
     {path:'/',component: Home},]

   Nach dem Login kopieren
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>

   Nach dem Login kopieren
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>

   Nach dem Login kopieren
5. Führen Sie den Befehl

   // Variables@import 'variables';// Bootstrap@import '~bootstrap/scss/bootstrap';// element-plus@import "~element-plus/lib/theme-chalk/index.css";

   Nach dem Login kopieren
6. Rendering
7. aus
9. Die Konsolenausgabe ist ein Axios-Post-Request-Test.
10. 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!