laravel8+vue3.0+要素プラス構築法をシェアする

                                                       

次のチュートリアルコラムでは、laravel チュートリアルコラムからの laravel8 vue3.0 要素プラス構築方法を紹介し、共有します。必要としている！

まえがき

数日前に突然 vue3.0 を発見したので、時間があったので試してみました。

#開始

laravel8 プロジェクト

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

または

laravel new laravel8

を作成します
1. laravel/ui

   composer require laravel/ui

   をインストールし、ルート ディレクトリで

   php artisan ui vue

   を実行します
2. 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"
     }

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

4. 新しい router.js

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

5. 新しい App.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>

6. 新しい Home.vuerrree
7. app.scss 要素と CSS ファイルを導入します

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

8. #コマンドを実行します

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

#レンダリング

#コンソール出力は axios post request テストです。 ＃＃＃＃＃＃完了！

以上がlaravel8+vue3.0+要素プラス構築法をシェアするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。