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

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