NPM에서 Vuejs 컴포넌트를 만들고 게시하는 방법

NPM에서 Vuejs 컴포넌트를 만들고 게시하는 방법

저는 이제 본격적으로 일을 시작하게 되었습니다.vue제가 일하는 회사의 모든 프로젝트에 사용하기 시작했습니다.그리고 그 결과, 제가 만든 것은components으로는 「」입니다autocomplete여러 가지가 있다는 것을 알고 있습니다.이미 몇 개를 사용했지만, 어느 것도 제 요구를 모두 충족시키지 못했습니다.제가 같은 컴포넌트를 .

컴포넌트를 하고, 'npmjs', 'npmjs', 'npmjs'를 .npm install -save ...커뮤니티에 조금이나마 공헌할 수 있습니다.

갱신하다

vue-loader 15.x 릴리즈에서는 이 답변은 기능하지 않습니다.https://medium.freecodecamp.org/how-to-create-a-vue-js-app-using-single-file-components-without-the-cli-7e73e5b8244f 를 사용해 주세요.

---

Vuejs 라이브러리/컴포넌트를 처음부터 작성/게시할 수 있는 방법은 다음과 같습니다.

순서와 커맨드를 모두 적어두기 때문에, 가이드 전체에 따라 독자적인 Vuejs 컴포넌트를 작성해, NPM 에 공개할 수 있습니다.

게시 후에는 대부분의 라이브러리와 마찬가지로 ex:를 사용하여 설치할 수 있습니다.

npm install --save your-component 

그런 다음 다음을 사용하여 앱 내 구성 요소를 가져옵니다.

import something from 'your-component'

---

컴포넌트를 먼저 폴더를 .vuejs-hello-app 다른 을 붙이고 그에 '(어느 이름)'을.

npm init

npm이 "Enter"라는 이름의 합니다.package.json하다

을 (에서) 했습니다.1.0.0로로 합니다.0.1.0))))

{
  "name": "vuejs-hello-app",
  "version": "0.1.0",
  "description": "vuejs library demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

그 후 라이브러리의 의존관계를 설치해야 합니다.

는 크게 두 수 있습니다.dependency ★★★★★★★★★★★★★★★★★」devDependency

dependency:
자체 컴포넌트가 실행되는 외부 라이브러리입니다.다른 사용자가 컴포넌트를 설치할 때 npm은 이 의존관계가 존재하는지 또는 먼저 설치되었는지 확인합니다.vue용 컴포넌트를 작성하기 때문에 vue가 필요한지 확인해야 합니다.는 다음과 같이 합니다.

npm install --save vue

devDependency:
개발 목적으로만 필요한 라이브러리입니다.이러한 라이브러리는 구축 및/또는 변환에 도움이 됩니다.

의 방법을 하여 Dev 는 Dev 입니다.-dev로.--save

이제 컴포넌트에 필요한 최소한의 Dev 의존성을 설치하겠습니다.

npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env
npm install --save-dev cross-env
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev node-sass
npm install --save-dev sass-loader
npm install --save-dev vue-loader
npm install --save-dev vue-template-compiler
npm install --save-dev webpack
npm install --save-dev webpack-dev-server

이 시점에서 라이브러리가 설치되고package.json다음과 같이 업데이트됩니다.

{
  "name": "vuejs-hello-app",
  "version": "0.1.0",
  "description": "vuejs library demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.5.0",
    "vue-template-compiler": "^2.5.9",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "vue": "^2.5.9"
  }
}

(주의: 추가했습니다."build": "webpack -p"웹 팩으로 lib를 구축하다)

이제 코드를 만들고 변환해야 하므로 빌드 버전을 저장할 폴더가 필요합니다.루트 폴더 내에 폴더를 만들고 다음과 같이 이름을 붙입니다.dist같은 장소에 웹 팩용 컨피규레이션파일을 입력하고 이름을 붙입니다.webpack.config.js

지금까지 작성한 파일은 모두 구성용입니다.사람들이 실제로 사용하는 앱의 경우 최소 두 개의 파일을 생성해야 합니다.src/디렉토리로 이동합니다.

A main.js그리고.VuejsHelloApp.vue다음과 같이 표현합니다../src/main.js그리고../src/components/VuejsHelloApp.vue

제 광산 구조는 다음과 같습니다.

dist
node_modules
src
  main.js
  components
    VuejsHelloApp.vue
.babelrc
.eslintignore
.gitignore
.npmignore
.travis.yml
CONTRIBUTING
LICENSE
package.json
README.md
webpack.config.js

리스트 되어 있는 파일을 살펴보고, 각 파일의 기능에 대해 설명하겠습니다.

/distES6 이외의 빌드(변환 완료) 버전의 코드를 저장합니다.

node_modules 알고 것

src/이것은 당신의 라이브러리의 루트 디르입니다.

.babelrc있기 에 modules 하려면 이 합니다.

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

.eslintignoreESLINT를 사용하다이것을 안에 넣습니다.

build/*.js 

.gitignore git)

.npmignore NPM의 .gitignore와

.travis.ymltravis의 CI 예제를 확인하고 구성합니다.

CONTRIBUTING가 아니다

LICENSE가 아니다

package.json 무시하다

README.md가 아니다

webpack.config.js이 파일은 브라우저와 호환되는 코드 빌드 버전을 만드는 데 중요한 파일입니다.

이 앱에 따르면 다음과 같은 최소한의 예를 제시하겠습니다.

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',

  module: {
    rules: [
      // use babel-loader for js files
      { test: /\.js$/, use: 'babel-loader' },
      // use vue-loader for .vue files
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },
  // default for pretty much every project
  context: __dirname,
  // specify your entry/main file
  output: {
    // specify your output directory...
    path: path.resolve(__dirname, './dist'),
    // and filename
    filename: 'vuejs-hello-app.js'
  }
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

은 '지시하다' 입니다.entry ★★★★★★★★★★★★★★★★★」output 웹 팩 를 통해 내용을 할 수 앱을 완전히 사용자 정의하려면 웹 팩 문서를 통해 자세한 내용을 확인할 수 있습니다.

하는 ./src/main.js 앱합니다../dist/vuejs-hello-app.js

이것으로 실제 앱 이외의 셋업은 거의 완료되었습니다.

★★★★★★★★★★★★★★★로 이동/src/components/VuejsHelloApp.vue이 앱을할 수 .

<template>
  <div>
    <button @mouseover='move($event)'> I'm alive </button>
  </div>
</template>

<script>
export default {
  data () {
   return {}
  },

  methods: {
    move (event) {
        let pos = event.target.style.float; 
      if(pos === 'left'){
        event.target.style.float = 'right'
      }else{
        event.target.style.float = 'left'
      }
    }
  }
}

</script>

<style scoped>

</style>

그리고 중요한 것은,./src/main.js 수 있습니다.

import VuejsHelloApp from './components/VuejsHelloApp.vue'
export default VuejsHelloApp

, 그럼 이제 자신의 .package.json이 「」를 합니다."main: "index.js","main": "src/main.js",

그런 다음 다음 다음 명령을 실행하여 앱을 빌드하고 게시하십시오.

npm run build
git add .
git commit -m "initial commit"
git push -u origin master
npm login 
npm publish

---

라이브러리를 가져오고 사용하는 중입니다.

모든 것이 순조롭게 진행되었으면 다음과 같이 앱을 설치합니다.

npm install --save vuejs-hello-app

vue에서는 다음과 같이 사용합니다.

<template>
  <div>
    <VuejsHelloApp> </VuejsHelloApp>
  </div>
</template>

<script>
import VuejsHelloApp from 'vuejs-hello-app'
export default {
  name: 'HelloWorld',
  components: { VuejsHelloApp }
}
</script>

---

답을 쓰면서 이 앱 https://github.com/samayo/vuejs-hello-app을 만들었으니 코드를 더 잘 이해하는 데 도움이 될 것 같습니다.

언급URL : https://stackoverflow.com/questions/47754244/how-to-create-and-publish-a-vuejs-component-on-npm