将 vue.js 和 vuetify 整合到 laravel 8 中的项目模板

￡神魔★判官ぃ 2022-10-28 13:23 54阅读 0赞

## laravel\_vuetify\_template ##

*  [码云][Link 1]

## 安装记录 ##

1.  修改了 Laravel 配置信息：

*  ‘timezone’ => ‘Asia/Shanghai’,
 *  ‘locale’ => ‘zh\_CN’,

1.  vue.js 和 vuetify 初始化:

*  vue.js 项目结构
 *  vue-i18n 国际化
 *  二次封装 axios
 *

1.  前后端数据交互成功

## 项目结构 ##

*  resources
    
     *  js -------------------------------------------------------------- 前端 JS 目录
        
         *  api -------------------------------------------------- 接口配置目录
            
             *  app -------------------------------------------------- 应用程序接口配置文件
             *  axios -------------------------------------------------二次封装的 axios 文件
         *  common/lang -------------------------------------------------- i18n 自定义多语言包目录
         *  components -------------------------------------------------- vue.js 组件目录
         *  modules -------------------------------------------------- vuex 模块
            
             *  app.js -------------------------------------------------- 应用程序接口配置文件
         *  pages/Layout.vue -------------------------------------------------- vue.js 模板目录
         *  app.js -------------------------------------------------- vue.js 入口文件
         *  config.js -------------------------------------------------- vue.js 自定义配置文件
         *  event-bus.js -------------------------------------------------- 事件总线文件
         *  routes.js -------------------------------------------------- 路由配置文件
         *  store.js -------------------------------------------------- vuex 模块注册文件
         *  vuetify.js -------------------------------------------------- vuetify 配置文件
     *  views
        
         *  app.blade.php -------------------------------------------------- vue.js 入口
     *  其余文件为 Laravel 后端配置文件，前端不必关心。

## FAQ ##

1.  安装好 node 的所有包之后执行 npm run watch-poll 或 npm run dev 报错，不识别 Vue.js 模板标签：  
    ![在这里插入图片描述][20210206133336546.png]  
    解决办法：webpack.mix.js 中追加 .vue(\{ version: 2 \})

//https://github.com/JeffreyWay/laravel-mix/blob/master/UPGRADE.md
    mix.js('resources/js/app.js', 'public/js')
        .postCss('resources/css/app.css', 'public/css', [
            //
        ]).vue({  version: 2 }).version();

[Link 1]: https://gitee.com/geekadpt/laravel_vuetify_template
[20210206133336546.png]: /images/20221024/e3b50d5a103f40dabd41f37bd2bf2856.png