Laravel Mix??????????????????

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Laravel Mix??????????????????相关的知识，希望对你有一定的参考价值。

?????????name   ??????   fun   ??????   box   resource   pid   data   blog   

 ????????????????????????vue+laravel??????????????????laravel???vue???????????????????????????????????????????????????????????????vue???????????????????????????????????????????????????????????????????????????????????????laravel???????????????????????????Mix????????????????????????????????????????????????????????????????????????laravel????????????????????????????????????????????????node_models?????????

????????????

?????????

??????Node????????????????????????????????????????????????Node???

?????????node -v    ???   npm -v????????????????????????????????????????????????Node?????????????????????Node???

cdn.jsdelivr.net/npm/vue,???????????????Node???

????????????????????????Laravel Mix???????????????Laravel?????????composer create-project --prefer-dist laravel/laravel blog  ????????????????????????blog  ???

???????????????????????????????????????

?????????????????????npm install????????????????????????????????????

???????????????

?????? routes/web.php ????????????

Route::get(???/???,function(){

return view(???index???);

});

????????????Hello.vue??????

??? resources/assets/js/components ??????????????? Hello.vue ??????

  1.  
    <template>
  2.  
    <div>
  3.  
    <h1>Hello, Larvuent!</h1>
  4.  
    <p class="hello">{{ msg }}</p>
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    export default {
  10.  
    data() {
  11.  
    return {
  12.  
    msg: ???This is a Laravel with Vue and Element Demo.???
  13.  
    }
  14.  
    }
  15.  
    }
  16.  
    </script>
  17.  
     
  18.  
    <style>
  19.  
    .hello {
  20.  
    font-size: 2em;
  21.  
    color: green;
  22.  
    }
  23.  
    </style>

?????? app.js ??????

?????? resources/assets/js/app.js ??????

  1.  
    require(???./bootstrap???);
  2.  
     
  3.  
    window.Vue = require(???vue???);
  4.  
     
  5.  
    // Vue.component(???example???, require(???./components/Example.vue???)); // ?????????
  6.  
    import Hello from ???./components/Hello.vue???; // ??????Hello ??????
  7.  
     
  8.  
    const app = new Vue({
  9.  
    el: ???#app???,
  10.  
    render: h => h(Hello)
  11.  
    });

?????? Laravel ?????????????????? Vue ??????

??? resources/views ??????????????? index.blade.php ??????

  1.  
    <!doctype html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Larvuent</title>
  6.  
    </head>
  7.  
    <body>
  8.  
    <div id="app"></div>
  9.  
     
  10.  
    <script src="{{ mix(???js/app.js???) }}"></script>
  11.  
    </body>
  12.  
    </html>

???????????????  npm run dev

?????????????????????????????????????????????http://192.168.1.112

???????????????????????????

????????????

 

??????????????????vue+laravel?????????????????????element.

npm i element-ui -S   ????????????element

?????? resources/assets/js/app.js ??????

  1.  
    import Hello from ???./components/Hello.vue???; // ??????Hello ??????
  2.  
    import ElementUI from ???element-ui???;
  3.  
    import ???element-ui/lib/theme-default/index.css???;
  4.  
    Vue.use(ElementUI);

??????Hello.vue?????????element?????????

  1.  
    <template>
  2.  
    <div>
  3.  
    <h1>Hello, Larvuent!</h1>
  4.  
    <el-button @click="visible = true">??????</el-button>
  5.  
    <el-dialog v-model="visible">
  6.  
    <p>???????????? Element</p>
  7.  
    </el-dialog>
  8.  
    </div>
  9.  
    </template>
  10.  
     
  11.  
    <script>
  12.  
    export default {
  13.  
    data() {
  14.  
    return {
  15.  
    visible: false
  16.  
    }
  17.  
    }
  18.  
    }
  19.  
    </script>
  20.  
     
  21.  
    <style>
  22.  
    .hello {
  23.  
    font-size: 2em;
  24.  
    color: green;
  25.  
    }
  26.  
    </style>

????????????npm run dev  ??????????????????????????????????????????????????????

????????????

?????????????????????vue???????????????????????????????????????????????????????????????  npm run watch ????????????????????????????????????????????????????????????????????????????????????

???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

????????????

???????????????????????????????????????

???????????????index???????????????header?????????????????????

??? ???  resources/views/index.blade.php  ?????????????????????

???????????????????????????????????????????????????????????????vue?????????????????????????????????????????????

??????  npm install vue-router --save-dev  ???????????????

?????????

??? resources/assets/js ????????????????????? router ???????????? router ??????????????? index.js ??????

  1.  
    import Vue from ???vue???;
  2.  
    import VueRouter from ???vue-router???;
  3.  
    Vue.use(VueRouter);
  4.  
     
  5.  
    export default new VueRouter({
  6.  
    saveScrollPosition: true,
  7.  
    routes: [
  8.  
    {
  9.  
    name: ???hello???,
  10.  
    path: ???/hello???,
  11.  
    component: resolve => void(require([???../components/Hello.vue???], resolve))
  12.  
    }
  13.  
    ]
  14.  
    });

??? resources/assets/js ??????????????? App.vue ??????

  1.  
    <template>
  2.  
    <div>
  3.  
    <h1>Hello, {{ msg }}!</h1>
  4.  
    <router-view></router-view> <!--??????????????????????????????????????????-->
  5.  
    </div>
  6.  
    </template>
  7.  
     
  8.  
    <script>
  9.  
    export default {
  10.  
    data() {
  11.  
    return {
  12.  
    msg: ???Vue???
  13.  
    }
  14.  
    }
  15.  
    }
  16.  
    </script>
  17.  
     
  18.  
    <style>
  19.  
    </style>

?????? resources/assets/js/app.js ?????????

  1.  
    // import Hello from ???./components/Hello.vue???;
  2.  
    import App from ???./App.vue???;
  3.  
    import ElementUI from ???element-ui???;
  4.  
    import ???element-ui/lib/theme-default/index.css???;
  5.  
    Vue.use(ElementUI);
  6.  
     
  7.  
    import router from ???./router/index.js???;
  8.  
     
  9.  
    const app = new Vue({
  10.  
    el: ???#app???,
  11.  
    router,
  12.  
    render: h => h(App)
  13.  
    });

???????????????

以上是关于Laravel Mix??????????????????的主要内容，如果未能解决你的问题，请参考以下文章

laravel-mix-purgecss 和 Summernote

在 AWS Serverless 平台上部署 Laravel (laravel-mix) 应用程序

在 Laravel Mix 中使用 extract() 时 Vue 未加载

Laravel，NPM：找不到命令“mix”

Laravel 版本缓存与 Laravel Mix 不工作

使用 laravel mix 设置外部库