vue 설치

npm i vue@next  // vue 설치

npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc  // Vue 필수 패키지 설치

webpack.config.js (module)

**const {VueLoaderPlugin} = require('vue-loader')**

module: {
    rules: [
      {
        **test:/\\.vue$/,**
        **use: 'vue-loader'**
      },
      {
        test: /\\.s?css$/,
        use: [
          // 순서 중요!
          **'vue-style-loader'**,
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      }
},
plugins: [
    new HtmlPlugin({
      template: './index.html',
    }),
    new CopyPlugin({
      patterns: [
        { from: 'static' }
      ]
    }),
    **new VueLoaderPlugin()**
  ]

• 기존 webpack.config.js 설정에 vue-loader 와 vue-style-loader 설정을 추가한다.

webpack.config.js (resolve)

// webpack.config.js 파일

module.exports = {
  resolve: {
    extensions: ['.js', '.vue'],  // .js 확장자, .vue 확장자 생략 
    alias: {
      '~': path.resolve(__dirname, 'src'),
      'assets': path.resolve(__dirname, 'src/assets')
    }
  }
}

• extensions : 어떤 확장자를 생략할지 설정한다.
• alias : 경로에 별칭을 설정한다.

.eslintrc.js 설정

module.exports = {
  env: {
    browser: true,
    node: true
  },
  extends: [
    // vue
    'plugin:vue/vue3-strongly-recommended',

    //js
    'eslint:recommended'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    
  }
}

• eslint : 소스 코드 검사기

🔝 위로 가기