Vue 구성 요소를 적게 사용하십시오.

이번에는 Vue 컴포넌트의 Less 사용에 대해 소개하겠습니다. Vue 컴포넌트에서 Less를 사용할 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.

먼저 npm init webpack 프로젝트 이름 방식을 사용하여 프로젝트를 생성하면 webpack을 수동으로 구성할 필요가 없다는 점을 설명하겠습니다npm init webpack 项目名 的方式创建的项目,无需手动配置webpack

所以再vue中使用less就非常简单了，只需要安装less, less-loader就行了

步骤

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

如果安装成功那么就可以再vue组件中使用less了

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

补充：

vue中 如何使用less

http://element.eleme.io/     //

elementUI是基于vue2

vue中使用less

首先vue开发环境已经安装成功

当所有东西都 准备好之后 ：

第一步：

安装less依赖，npm install less less-loader --save

그래서 Vue에서 less를 사용하는 것은 매우 간단합니다. less-loader만 설치하면 됩니다

단계

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

설치에 성공하면 vue 구성 요소에서 less를 사용할 수 있습니다

（或者
@import './index.less'; //引入全局less文件
）。
(
html中直接引入：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)

추가 :

vue에서 less를 사용하는 방법

http://element.eleme.io/ //

elementUI는 vue2를 기반으로 합니다

Use less in vue

우선, vue 개발 환경이 성공적으로 설치되었습니다

모든 것이 준비되면 그 후:

1단계:

덜 종속성 설치, npm install less less-loader --save🎜🎜2단계: 🎜 🎜webpack.config.js 파일을 수정하고 이에 의존하여 외부 less를 지원합니다. 이제 원본 코드에 🎜rrreee🎜를 추가하면 기본적으로 설치가 완료됩니다. 그러면 사용 시 lang="less"를 추가합니다. 스타일 태그를 사용하면 더 적은 비용으로 코드를 작성할 수 있습니다(스타일 태그에 범위를 추가하면 이 범위에서만 유효함을 의미합니다)🎜rrreee🎜이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 확인하세요. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요! 🎜🎜추천 자료: 🎜🎜🎜JSON 형식을 사용하여 POST 요청을 보내는 방법🎜🎜🎜🎜Vue.js 로그인 양식 코드를 사용자 정의하는 방법🎜🎜🎜🎜Vue의 UI 구성 요소 라이브러리를 사용하여 동적 구성 요소를 사용자 정의🎜🎜

위 내용은 Vue 구성 요소를 적게 사용하십시오.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!