laravel8+vue3.0+element-plus 구성 방법 공유-Laravel-php.cn

laravel8+vue3.0+element-plus 구성 방법 공유

藏色散人

풀어 주다： 2021-03-16 09:01:22

앞으로

3810명이 탐색했습니다.

튜토리얼 칼럼에서 Laravel8+Vue3.0+Element-Plus와 공유하고자 소개한 내용인데, 필요한 친구들에게 도움이 되었으면 좋겠습니다!

laravel8+vue3.0+element-plus 구성 방법 공유 머리말

몇일전에 갑자기 vue3.0을 발견해서 할게 없어서 그냥 사용해봤습니다.

STARTeatStarteCreate Laravel8 프로젝트

composer create-project laravel/laravel laravel8 --prefer-dist

로그인 후 복사

또는

laravel new laravel8

로그인 후 복사

STALL LARLAVE/UI

composer require laravel/ui

로그인 후 복사

및 R

php artisan ui vue

로그인 후 복사

를 루트 디렉토리에서 실행합니다. js

"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"
  }

로그인 후 복사

re new app.vue (요소 플러스 공식 문서 예제)

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

로그인 후 복사

create new home.vue

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

로그인 후 복사

app.scss 및 요소 플러스 CSS File

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

로그인 후 복사

run 명령

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

로그인 후 복사