똑같은 삽질은 2번 하지 말자
Nuxt 정리 No.2 본문
import Vue from 'vue';
import Vuex from 'vuex';
import VueRouter from 'vue-router';
Vue.use(Vuex);
Vue.use(VueRouter);
Nuxt에선 위의 방식을 사용해서 모듈을 가져오지 않는다. (코드반복 제거)
nuxt.config.js
export default {
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
titleTemplate: '%s - nuxt-ts',
title: 'nodebird',
htmlAttrs: {
lang: 'en',
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: true,
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [
// https://go.nuxtjs.dev/typescript
'@nuxt/typescript-build',
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
],
// Modules: https://go.nuxtjs.dev/config-modules
modules: ['@nuxtjs/axios'],
};
이렇게 환경설정 해두면, 어떤 컴포넌트에서든 전역적으로 vuetify와 axios를 사용할 수 있다.
개발단계 eslint 설정(-D 가 development)
npm i -D eslint eslint-plugin-vue
설치된 패키지가 구식인지 검사
npm outdated
outdated에 출력되는 단어 의미
- wanted is the maximum version of the package that satisfies the semver range specified in package.json. If there's no available semver range (i.e. you're running npm outdated --global, or the package isn't included in package.json), then wanted shows the currently-installed version.
- latest is the version of the package tagged as latest in the registry. Running npm publish with no special configuration will publish the package with a dist-tag of latest. This may or may not be the maximum version of the package, or the most-recently published version of the package, depending on how the package's developer manages the latest
그리고 Nuxt의 빌드가 뭔가 꼬였다 싶으면 그냥 .nuxt파일을 싹 삭제하고 처음부터 빌드를 하자.
node_modules도 마찬가지이다. 패키지 설치가 꼬이면 삭제 ㄱㄱ
'Vue' 카테고리의 다른 글
컴포넌트의 플러그인화, 컴포넌트 디자인 패턴(Component Design Pattern) (0) | 2021.05.01 |
---|---|
Nuxt 정리 No.3(middleware, fetch, asyncData) (2) | 2021.03.21 |
Nuxt 정리 No.1 (0) | 2021.02.28 |
Vue.js data가 함수여야 하는 경우 (0) | 2020.11.22 |
Vue.js 에서 처리중일때는 해당 버튼 무효화 하기(두번 이상의 클릭을 했을때, 한번의 서비스만 처리하기 위해) (0) | 2020.08.05 |
Comments