Laravel中安装使用Vue

友儿

December 8, 2020

1765 views

No comments

2597 words

Laravel框架

windows|linux安装node.js

假设你已经安装好node.js

切换淘宝镜像加速

  npm install cnpm -g --registry=http://registry.npm.taobao.org

切换到laravel工作目录,运行npm install初始化下载package.json的包

  sudo npm install      #liunx以root执行命令
  npm install           #windows以管理员身份运行cmd并切换到laravel工作目录

监听项目变化从而重新编译程序

  npm run watch                      #监听项目变化从而重新编译程序
  npm install vue-template-compiler --save-dev --production=false            #提示执行这个,执行一下就可以了
  npm run watch                      #再次执行,让它一直在后台监听

成功提示

  > @ watch C:\Users\Administrator\Desktop\laravwe\blog
  > npm run development -- --watch
  
  
  > @ development C:\Users\Administrator\Desktop\laravwe\blog
  > cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
  
  10% building 1/1 modules 0 active
  webpack is watching the files…
  
  98% after emitting SizeLimitsPlugin
  
   DONE  Compiled successfully in 11786ms                                                                                                                                                     下午12:33:03
  
         Asset      Size   Chunks             Chunk Names
  /css/app.css   178 KiB  /js/app  [emitted]  /js/app
    /js/app.js  1.41 MiB  /js/app  [emitted]  /js/app

假设你已经成功的开启前端监听编译,我们下面来讲使用。

启动laravel框架

 php artisan serve               #默认端口为8000
 php artisan serve  --port=80    #自定义端口

在resource/js/app.js里注册vue组键

    Vue.component('example-component', require('./components/ExampleComponent.vue').default);

在resource/js/components里编写vue组键:例如ExampleComponent.vue

  <template>
      <div class="container">
          <div class="row justify-content-center">
              <div class="col-md-8">
                  <div class="card">
                      <div class="card-header">Example Component</div>
  
                      <div class="card-body">
                          I'm an example component.
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </template>
  
  <script>
      export default {
          mounted() {
              console.log('Component mounted.')
          }
      }
  </script>

在views模板文件里调用vue自定义组键,例如:

    @extends('layouts.app')
    
    @section('content')
    <example-component></example-component>           <!--该组键就是在resource/js/app.js里注册的组键,实际位置在resource/js/components-->
    @endsection