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
    • 前面说过的,npm run watch 自动监听变化重新编译vue组键使得浏览器解析

    关注友儿不迷路

    Last modification:December 9th, 2020 at 11:01 am
    如果觉得我的文章对你有用,请随意赞赏