Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置

Laravel 版本：6.X

Vue 版本：2.X

Laravel配置：

Laravel使用的是Laragon安装

选择Laravel；接下来弹出框，输入项目名，laravel会自动创建一个数据库，数据库名与项目名相同，

安装开始

安装完毕

过程中会弹出命令提示框，选择OK就行，忘记选择的话需要自己配置host

还要注意弹出命令提示框如果没有选，后续可能需要自己生成一个conf【直接去目录copy一个其他的，文件名和文件内部的内容改成lavue.test的，然后reload重启Apache】，我这里已经生成了，

现在就可以从浏览器打开lavue.test，查看了

Vue 配置

自从5.7版本之后 vue bootstrap 以及auth都需要额外安装包

打开Terminal命令行管理工具；

输入：

  1 composer require laravel/ui

安装完毕

键入

  1 php artisan ui –help

可以查看帮助

//支持类型有 bootstrap vue react

php artisan ui vue

php artisan ui bootstrap

php artisan ui react

//如果要一次支持auth 可以附加 --auth

php artisan ui vue --auth

然后执行 npm install 使用node.js安装相关依赖

可以同时使用npm run dev 配置

也可以使用 npm run watch-poll 这样在vue组件发生改变的时候，会自动generate
键入：

  1 npm install & npm run dev

  2

  3 或

  4

  5  npm install & npm run watch-poll

  6

安装完毕:

(1) 在resources/js路径下自动新建了一个components文件夹，以及一个ExampleComponent.vue文件

(2) 在views文件夹下自动现金auth文件夹 passwords子文件夹以及layouts文件夹

(3) app/Http/Controllers/Auth文件夹内新增几个Controller

(4) 打开主页http://lavue.test/ 出现register和login链接

还有一些文件发生了改变

详见:https://www.techiediaries.com/laravel-authentication-tutorial/

翻译文章：https://www.cnblogs.com/dzkjz/p/12362101.html 【没有翻译完成】

ExampleComponent.vue文件时自动生成的示例，

打开resources/js/app.js，可以发现在里面引入了示例组件

为了便于体会效果，我们新建一个view及route：

【view部分：】在 resources 文件夹中的 view 文件夹创建 index.blade.php

键入：

  1 <!doctype html>

  2 <html lang="{{ app()->getlocale()}}">

  3  <head>

  4      <meta charset="UTF-8">

  5      <meta name="viewport"

  6            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

  7      <meta http-equiv="X-UA-Compatible" content="ie=edge">

  8      {{--  防止CSRF攻击 可以赋值给ajax header 如果是form中直接使用@csrf即可 --}}

  9      <meta name="csrf-token" content="{{ csrf_token() }}">

 10      <link rel="stylesheet" href="{{ mix('css/app.css') }}">

 11      <title>Document</title>

 12  </head>

 13  <body>

 14  {{--id 为 app与 app.js中const app = new Vue({el: '#app',<<=【这个一致】});--}}

 15

 16 <div id="app">

 17      {{--   app.js中 组件名为example-component Vue.component('example-component', require('./components/ExampleComponent.vue').default);--}}

 18      <example-component></example-component>

 19  </div>

 20  {{--必须放置在下方--}}

 21  <script src="{{ mix('js/app.js') }}"></script>

 22  </body>

 23  </html>

 24

【route部分：】在phpstorm中按两下shift弹出搜索框，键入web

从结果中选择web.php打开

我们通过在web.php中键入下列代码增加一个route【或者修改一个其他route】

  1 Route::get('/index', function () {

  2      return view('index');

  3  });

接下来打开 http://lavue.test/index 即可查看

Element-UI 配置

打开控制台，键入

  1 npm i element-ui -s

安装成功界面：

安装完成后，需要在我们的项目中

（1）引入Element组件：

修改resources/js/app.js文件，在其中添加以下代码：

  1 import ElementUI from 'element-ui';

  2 import 'element-ui/lib/theme-chalk/index.css';

  3

  4 Vue.use(ElementUI);

  5

（2）测试使用：修改ExampleComponnet.vue文件，在文件中任意添加一个element组件试试效果：

  1 <template>

  2     <div class="container">

  3          <div class="row justify-content-center">

  4              <div class="col-md-8 col-md-offset-2">

  5                  <div class="panel panel-default">

  6                      <div class="panel-body">

  7                          请选择您的汽车品牌：

  8                     </div>

  9                      <el-select v-model="brand" placeholder="选择汽车品牌">

 10                          <el-option

 11                              v-for="brand in brands"

 12                              :key="brand.value"

 13                              :label="brand.label"

 14                              :value="brand.value"

 15                          ></el-option>

 16                      </el-select>

 17                  </div>

 18              </div>

 19          </div>

 20      </div>

 21  </template>

 22

 23 <script>

 24      export default {

 25          mounted() {

 26              console.log('Component mounted.')

 27          },

 28          data: function () {

 29              return {

 30                  brand: '',

 31                  brands: [

 32                      {label: '宝马', value: 'option1'},

 33                      {label: '比亚迪', value: 'option2'},

 34                      {label: '丰田', value: 'option3'},

 35                      {label: '本田', value: 'option4'},

 36                      {label: '吉利', value: 'option5'},

 37                      {label: '马自达', value: 'option6'},

 38                      {label: '长城', value: 'option7'},

 39                  ]

 40              }

 41          }

 42      }

 43  </script>

 44

如果没有执行过npm run watch-poll ，这时候看不到效果，键入

  1 npm run dev

即可，运行结果如下，说明 Element 组件已经成功添加至项目中

至此，Element配置完成。

Vue-router 配置

（1）. 安装vue-router：打开命令行，键入：

  1 npm install vue-router –save-dev

待安装完成。

补充：关于—save-dev：

  1 npm install moduleName # 安装模块到项目目录下

  2

  3 npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。

  4

  5 npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

  6

  7 npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

  8

（2）修改js以及视图：在resources/js文件夹下创建router.js 和 App.vue文件

(2.1)向App.vue中添加：

  1 <template>

  2     <div>

  3         <router-view></router-view>

  4     </div>

  5 </template>

  6

  7 <script scope>

  8     export default {

  9         name: "App",

 10         data: function () {

 11             return {}

 12         },

 13         components: {},

 14         computed: {},

 15         methods: {},

 16         mounted() {

 17         },

 18

 19     }

 20 </script>

 21

 22 <style scoped>

 23

 24 </style>

 25

（2.2）向router.js中添加：

  1 import Vue from "vue";

  2 import VueRouter from "vue-router";

  3

  4 Vue.use(VueRouter);//全局方法 Vue.use() 使用插件，需要在你调用 new Vue() 启动应用之前完成：

  5

  6

  7 export default new VueRouter({

  8     saveScrollPosition: true,

  9     routes: [

 10         {

 11             name: 'index',

 12             path: '/',

 13             component: resolve => void (require(['./components/ExampleComponent.vue'], resolve)),

 14         },

 15     ]

 16 })

 17

注：要了解resolve=>require 可以查看：

component：(resolve) => require

（2.3）向app.js中添加：

  1 import App from './App.vue';

  2 import router from './router.js';

修改：

  1 const app = new Vue({

  2         el: '#app',

  3         router,

  4         render: h => h(App),

  5      })

  6  ;

打开 http://lavue.test/index#/

说明 vue-router 安装成功【之前的el-select不会显示】

Vue结构为：

因为

如果去掉 render: h => h(App),

Vue结构为：

也就是说 render: h => h(App), 指定了渲染的是App组件内容;相关内容可以查看：

Vue2.0 render:h => h(App)

至此安装全部结束。