Laravel8中使用vue
安装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日
请登录后再评论