npm으로 Laravel9, Vue2 & Vuetify 기본 설치

4196 단어
  • Laravel 및 Vue 종속성을 설치하려면 다음을 실행합니다.
  • composer create-project --prefer-dist laravel/laravel:^9.* laravuetifycomposer require laravel/uiphp artisan ui vuenpm install vue-router vue-axiosnpm installnpm run dev
    다음과 같은 오류가 발생하는 경우:1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
    오류를 제거하려면 다음을 실행하십시오.npm install [email protected] --save-exact
    이제 npm run watch는 성공적인 빌드 메시지를 제공해야 합니다.
  • vue, sass 및 vuetify를 설치합니다.npm install vuetify
    npm install sass@~1.32 sass-loader deepmerge -D
  • webpack.mix.js로 이동하여 다음을 덮어씁니다.

  • mix.override(config => {
        config.modules.rules.push({
            test: /\.s(c|a)ss$/,
            use: [
              'vue-style-loader',
              'css-loader',
              {
                loader: 'sass-loader',
                // Requires sass-loader@^7.0.0
                options: {
                  implementation: require('sass'),
                  indentedSyntax: true // optional
                },
                // Requires >= sass-loader@^8.0.0
                options: {
                  implementation: require('sass'),
                  sassOptions: {
                    indentedSyntax: true // optional
                  },
                },
              },
            ],
        })
    })
    


  • 필요한 폴더를 만든 후 이동하여 이 파일을 만듭니다.

  • //resources/js/plugins/vuetify.js
    
    import Vue from 'vue'
    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    
    Vue.use(Vuetify)
    
    const opts = {}
    
    export default new Vuetify(opts)
    


  • 마지막으로 app.js에 다음 줄을 추가합니다.

  • //resources/js/app/js
    import Vue from 'vue'
    import vuetify from './plugins/vuetify' // path to vuetify export
    
    new Vue({
      vuetify,
    }).$mount('#app')
    


  • 마지막으로 리소스/뷰로 이동하고 welcome.blade.php를 다음으로 덮어써 vuetify를 테스트합니다.

  • <!DOCTYPE html>
    <html>
    <head>
      <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
    </head>
    <body>
      <div id="app">
        <v-app>
            <v-main>
                <v-container>Hello world</v-container>
            </v-main>
    
            <v-alert
            border="left"
            color="indigo"
            dark
            >
            I'm an alert from Vuetify with a border left type info
            </v-alert>
    
            <v-alert
                border="right"
                color="blue"
                dense
                dismissible
                elevation="16"
                icon="Icon here"
                outlined
                prominent
                shaped
                text
                type="success"
            ></v-alert>
    
        </v-app>
      </div>
    
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
      <script>
        new Vue({
          el: '#app',
          vuetify: new Vuetify(),
        })
      </script>
    </body>
    </html>
    


  • laravel 서버를 실행하고 http://localhost:8000/으로 이동합니다.
  • 아래 페이지를 보면 vuetify가 제대로 설치된 것을 확인할 수 있습니다.

  • 좋은 웹페이지 즐겨찾기