Laravel8中使用vue

作者: 温新

分类: 【Laravel】

阅读: 8397

时间: 2020-12-06 07:50:57

安装Laravel8

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

引入laravel/ui

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(222, 203, 107)">cd</span> la8vue</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">composer require laravel/ui</span>

初始化Bootstarp与Vue

<span style="box-sizing: border-box;padding-right: 0.1px">php artisan ui bootstrap</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">php artisan ui vue</span>

安装Vue前后对比

路径为 根目录下的package.json文件

安装前

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"devDependencies"</span>: {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"axios"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^0.19"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"cross-env"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^7.0"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"laravel-mix"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^5.0.1"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"lodash"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^4.17.19"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"resolve-url-loader"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^3.1.0"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>

安装后

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"devDependencies"</span>: {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"axios"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^0.19"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"bootstrap"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^4.0.0"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"cross-env"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^7.0"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"jquery"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^3.2"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"laravel-mix"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^5.0.1"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"lodash"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^4.17.19"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"popper.js"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^1.12"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"resolve-url-loader"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^2.3.1"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"sass"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^1.20.1"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"sass-loader"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^8.0.0"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"vue"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^2.5.17"</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-string cm-property" style="box-sizing: border-box;color: rgb(128, 203, 174)">"vue-template-compiler"</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">"^2.6.10"</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">}</span>

安装完成后,Vue组件和JS文件在resources/js目录下;

入口文件resources/js/app.js文件

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(130, 177, 255)">require</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'./bootstrap'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(130, 177, 255)">window</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">Vue</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">require</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'vue'</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 注册组件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>.<span style="box-sizing: border-box;color: rgb(128, 203, 174)">component</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'example-component'</span>, <span style="box-sizing: border-box;color: rgb(130, 177, 255)">require</span>(<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'./components/ExampleComponent.vue'</span>).<span style="box-sizing: border-box;color: rgb(128, 203, 174)">default</span>);</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 挂载实例</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(199, 146, 234)">const</span> <span style="box-sizing: border-box">app</span> <span style="box-sizing: border-box">=</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">new</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Vue</span>({</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(128, 203, 174)">el</span>: <span style="box-sizing: border-box;color: rgb(195, 232, 141)">'#app'</span>,</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">});</span>

安装依赖

npm install

代码测试

编写一个Vue组件

resources/js/components目录下创建DemoComponent.vue组件

<span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">class</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"container"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">class</span>=<span style="box-sizing: border-box;color: rgb(195, 232, 141)">"jumbotron"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">         这里是自如初博客</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span> </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">export</span> <span style="box-sizing: border-box;color: rgb(199, 146, 234)">default</span> {</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(84, 110, 122)">// 导出组件</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(128, 203, 174)">name</span>:<span style="box-sizing: border-box;color: rgb(195, 232, 141)">'DemoComponent'</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> }</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"><</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span> <span style="box-sizing: border-box;color: rgb(255, 203, 107)">scoped</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)"></</span><span style="box-sizing: border-box;color: rgb(255, 83, 112)">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box;color: rgb(255, 83, 112)">></span></span>

app.js中注册组件

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

改造laravel欢迎界面视图

resources/views/welcome.blade.php

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><!</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">DOCTYPE</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">html</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">html</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">lang</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"{{ str_replace('_', '-', app()->getLocale()) }}"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">head</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">meta</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">charset</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"utf-8"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">meta</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">name</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"viewport"</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">content</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"width=device-width, initial-scale=1"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">title</span><span style="box-sizing: border-box">></span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">Laravel</span><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">title</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box"><!--</span><span style="box-sizing: border-box;color: rgb(247, 118, 105)">1</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">、</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">引入支持</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">Bootstrap</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">的</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">CSS</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">样式文件</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">        <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(222, 203, 107)">link</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">href</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"{{ asset('css/app.css') }}"</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">rel</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"stylesheet"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">head</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">body</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">      <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">id</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"app"</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">          <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">       <span style="box-sizing: border-box"><!--</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">3</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">、使用组件</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">            <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">demo</span><span style="box-sizing: border-box">-</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">component</span><span style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">demo</span><span style="box-sizing: border-box">-</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">component</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">          <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">      <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">div</span><span style="box-sizing: border-box">></span>   </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">     <span style="box-sizing: border-box"><!--</span> <span style="box-sizing: border-box;color: rgb(247, 118, 105)">2</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">、引入支持Vue框架和Vue组件的app</span>.<span style="box-sizing: border-box;color: rgb(130, 177, 255)">js文件</span> <span style="box-sizing: border-box">--></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">      <span style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">script</span> <span style="box-sizing: border-box;color: rgb(130, 177, 255)">src</span><span style="box-sizing: border-box">=</span><span style="box-sizing: border-box;color: rgb(195, 232, 141)">"{{ asset('js/app.js') }}"</span><span style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">script</span><span style="box-sizing: border-box">></span> </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">body</span><span style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(130, 177, 255)">html</span><span style="box-sizing: border-box">></span></span>

运行

窗口中运行vue

npm run dev

实时编译

现在的情况是,每改动一次Vue组件就要重新执行npm run dev,这样非常麻烦;

可以使用npm run watch命令编译前端资源,每改动一次就会自动进行重新编译

我是小白,期待和优秀的你一起同行!

小白

2020年12月06日

请登录后再评论