分享laravel8+vue3.0+element-plus搭建方法

2022-05-15 0 919

下面由laravel教程栏目给大家介绍分享laravel8+vue3.0+element-plus搭建方法 ,希望对需要的朋友有所帮助!

分享laravel8+vue3.0+element-plus搭建方法

前言

前几天突然发现出了 vue3.0 ,刚好闲来无事搭个试试。

开始

创建 laravel8 项目

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

laravel new laravel8

安装 laravel/ui

composer require laravel/ui

根目录下运行

php artisan ui vue

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

修改 app.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=axiosapp.use(router)  .use(ElementPlus);app.mount('#app')

新建 router.js

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

新建 App.vue (element-plus 官方文档例子)

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

新建 Home.vue

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

app.scss 引入 element-plus css文件

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

运行命令

npm install && npm run dev

效果图

分享laravel8+vue3.0+element-plus搭建方法

控制台输出为axios post 请求测试。

完毕!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

【声明:根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!】
本站所有源码尽量保证原汁原味,如有特殊情况会作出声明及标注,网站资源不做任何二次加密(原版加密除外,不影响程序使用的不会做解密处理),方便您更好的学习参考。 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

即刻码站__国内靠谱的站长资源下载平台 php教程 分享laravel8+vue3.0+element-plus搭建方法 https://www.jike1995.com/36246.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务