안녕하세요 상훈입니다.
Nuxt.js 에서 Components를 삽입하는 방법은 Vue.js 와 동일합니다.
바로 App.vue | Index.vue 에서 components를 넣는것이죠.
하지만, 차이점이 존재합니다.
Vue.js -> Nuxt.js 에서는 import를 굳이 해줄 필요가 없습니다.
예시를 보여드리자면,
<Hero /> 컴포넌트를 삽입하였는데, script의 import가 존재하지 않는 것을 확인할 수 있습니다.
결과창에서도 Hero 컴포넌트가 잘 게시되어져 있는것을 확인 할 수 있습니다.
이게 가능한 이유는 Nuxt.config.js 에서 확인이 가능합니다.
해당 내용의 주석을 해석하자면, 자동으로 컴포넌트를 import 해주는 것입니다!
이상입니다.
Tailwindcss 를 사용하던 와중 커스터마이징을 할 수 있다는 것을 알았다.
Vue.js 3 - tailwindcss3 를 사용하였습니다.
하는 방법 바로 가시죠.
우선 tailwind.config.js 파일이 /src 내에 있습니다.
이곳에다가 작성하는것인데요,
theme.extend. 내에 작성
module.exports = {
purge: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
backgroundImage: (theme) => ({
'hero-pattern': "url('pattern-bg.png')",
'second-image-pattern': "url('sencond-bg.png')",
})
},
},
variants: {
extend: {},
},
plugins: [],
}
이렇게 작성하면 해당 내용을 전역으로 사용할 수 있게된다.
사용 사례
이상입니다.
유용하게 쓰십쇼
| [ Tailwind css ] Vue.js 3, vue-cli 4.5.x Error Install the another correct version! 설치 오류 (0) | 2022.02.15 |
|---|---|
| [ CSS ] 남은 영역 채우기, how to cover the left area by css? (0) | 2021.12.09 |
| [ Css ] Transition 트랜지션 사용하기 (0) | 2021.10.26 |
- Vue-cli 4.5 를 사용하고있습니다.
vue.config.js에서 scss, sass를 지정해주려는 가운데, appendData 에 대한 에러가 발생하였을 때 적용하여 해결하였습니다.
appendData -> additionalData
로 변경해주었습니다.
| [ Vue.js ] Computed 속성 다루기 (0) | 2022.02.05 |
|---|---|
| [ Vue.js ] LocalStorage 이용하는 방법, 예제 (0) | 2022.02.02 |
| [ Vue.js ] Arrow funciton ()=> ? why?? (0) | 2022.02.02 |
| [ Vuetify ] Vuetify 뷰티파이 이용해서 Login 창 구현 (0) | 2022.02.01 |
| [ Vue.js ] Webpack, node, npm, vue.js, build 해보기 (1) | 2022.01.30 |
// main.js
import Vue from 'vue'
import app from './App.vue'
new Vue(app).$mount('#root')<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/app.js"></script>
</body>
</html>// package.json : build 명령어 추가
"scripts": {
"build": "webpack --watch",
},// webpack.config.js
// entry객체 내에 app의 path.join 지정
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'production',
entry: { // app => 합쳐질 파일명, main.js => webpack으로 build 할 파일
app: path.join(__dirname, 'main.js')
},
module: { // rules를 통해 '.vue'로 끝나는 파일은 vue-loader를 사용하겠다고 정의
rules: // 이유: webpack은 기본적으로 javascript를 처리 App.vue 파일은 javascript 파일이 아니기 때문에, vue-loader가 처리하게 만듬
[{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
]},
plugins: [ // vueloader plugin을 사용하기 위해 vue-loader plugin 모듈을 가져옴
new VueLoaderPlugin()
],
output: { // build결과물에 대한 정보.
filename: 'app.js', // build 파일명
path: path.join(__dirname, 'dist') // 파일이 저장될 디렉터리 지정
}
}
node.js 와 vue.js 에서 모듈들을 삽입하는 방식의 차이. require, import...
// In node.js
require, module.export
// In Vue.js
import, export default이렇게 직접 하나씩 module들을 다운로드 하고 삽입하는 것은 vue-cli가 잘나와서 굳이 필요하다고는 생각치 않는다.
하지만 프로젝트 기본을 설정하는 webpack.config.js 를 어떻게 구조화하는지에 따라 명령어에 따라 에러가 발생할 수도있다는 것을 한 번 더 느끼게 해주었고, vue의 config가 어떤 식으로 돌아가는 지 이해가 더 잘되었다.
그간 프로젝트 만들고 에러 해결해 나가는 것에 급급해 했지만, 하나씩 기초를 다질 때가 된 것 같아 이렇게 webpack에 대해 알아보았다.
예전에 bootstrap css-framework를 사용하면서 dist가 무엇인가? 에 대해 의문을 가졌지만 그 때에는 그것보다 구현하는데에 급급했기에 넘어갔지만, 이번 기회에 dist가 왜 발생하고, 어떤 식으로 프로젝트를 구성하는지에 대해 좀 더 잘 알 수 있었다.
Vue.js 프로젝트를 webpack을 이용해
npm run build를 하였을 때 나타나는 경고 문구
WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack.config.js 에 어떤 모드로 프로젝트를 설정한것인지 기재를 안해놓았기 때문이다.
그렇기에 mode: 'production' 혹은 'development' 를 추가해주면 된다.
| [ Vuetify ] Vuetify 뷰티파이 이용해서 Login 창 구현 (0) | 2022.02.01 |
|---|---|
| [ Vue.js ] Webpack, node, npm, vue.js, build 해보기 (1) | 2022.01.30 |
| [ Vue.js ] How to use Custom Directives in Vue.js 3?? | vue.js3에서 커스텀 디렉티브 사용하는 방법 예제 (0) | 2022.01.05 |
| [ Vue.js ] v-on, @ click 이벤트로 여러 개의 메서드 실행하기, 다중 메서드 실행 하는 방법 (0) | 2021.12.22 |
| [ Vue.js ] v-for 사용하기 예제 02 - 객체배열 (0) | 2021.12.21 |