大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

小编给大家分享一下laravel8+vue3.0+element-plus的搭建方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:主机域名虚拟主机、营销软件、网站建设、宁波网站维护、网站推广。

开始

  1. 创建 laravel8 项目

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

    laravel new laravel8
  2. 安装 laravel/ui

    composer require laravel/ui

    根目录下运行

    php artisan ui vue
  3. 修改 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"
      }
  4. 修改 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=axios
    app.use(router)
      .use(ElementPlus);app.mount('#app')
  5. 新建 router.js

    import Home from "./components/layouts/Home"export default [
      {path:'/',component: Home},]
  6. 新建 App.vue (element-plus 官方文档例子)

  7. 新建 Home.vue

  8. app.scss 引入 element-plus css文件

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

    npm install && npm run dev

以上是“laravel8+vue3.0+element-plus的搭建方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


名称栏目:laravel8+vue3.0+element-plus的搭建方法
网页地址:http://dzwzjz.com/article/gohjpc.html
在线咨询
服务热线
服务热线:028-86922220
TOP