VUE components are made into npm package, uploaded and used

catalog

nexus builds npm repository

nexus startup (docker form)

docker run -d -p 8085:8081 --name nexus -v `pwd`/data:/nexus-data sonatype/nexus3:3.23.0

  • Port number of external exposure is 8085

  • nexus data is stored in the data directory under the boot directory

  • The nexus version number used is 3.23.0

  • After startup, visit http://{ip}:8085 and enter the login page. The default administrator user name for the first login is admin, and the password is under data admin.password In file

  • The first entry will ask if anonymous access is allowed, and select allow. In this way, the client can pull the corresponding npm package from nexus without authentication, or set it later

Configure npm repository

  1. After logging in as admin istrator, click create repository

  2. Go to create page

The repository related to npm package has three group s, proxy and hosted

  • Group: npm warehouse group, which does not store npm packages, but combines multiple npm repositories to provide external services
  • hosted: local npm warehouse. Our customized components need to be uploaded to this type of warehouse
  • Proxy: proxy npm warehouse. A public warehouse address is set internally. When we download from the npm warehouse of nexus, if there is no corresponding package in the warehouse, nexus will automatically download from the public warehouse through proxy and cache it in nexus. When downloading the same package again, we do not need to download it online, and get it directly from the cache of nexus.

In general, we will create a proxy repository, and the internal proxy will https://registry.npm.taobao.org ; then create multiple hosted repositories according to the business division; then create a group type repository, add the hosted and proxy repositories to the group, and then use NPM config set registry = {grow repository in the development environment URL}, so that developers can download the customized NPM package from hosted. If it is a public package, it will be automatically downloaded through proxy.

  1. Create a repository of type proxy

  2. Create a repository of hosted type

    • Select allow deploy in the Deployment policy to allow repeated upload of packages with the same name and version number

  3. Create a repository of type group

    • Append the proxy and hosted repositories we created

Configure the registry of the development environment

  1. Set registry by executing the following command

    npm config set registry=http://localhost:8085/repository/falcon-npm-group/
    • Among them http://localhost : 8085 / repository / Falcon NPM group / is the address of the group warehouse we created

  2. Execute the following command to see if you want to download the package from your own repository

    $ npm --loglevel info install jquery
npm info it worked if it ends with ok
npm info using npm@6.14.4
npm info using node@v12.16.2
npm http fetch GET 200 http://localhost:8085/repository/falcon-npm-group/jquery 1428ms
npm timing stage:loadCurrentTree Completed in 1552ms
npm timing stage:loadIdealTree:cloneCurrentTree Completed in 0ms
npm timing stage:loadIdealTree:loadShrinkwrap Completed in 0ms
npm timing stage:loadIdealTree:loadAllDepsIntoIdealTree Completed in 7ms
npm timing stage:loadIdealTree Completed in 13ms
npm timing stage:generateActionsToTake Completed in 8ms
npm http fetch POST 400 http://localhost:8085/repository/falcon-npm-group/-/npm/v1/security/audits/quick 163ms
npm http fetch GET 200 http://localhost:8085/repository/falcon-npm-group/jquery/-/jquery-3.5.1.tgz 1337ms
npm timing action:extract Completed in 1442ms
npm timing action:finalize Completed in 11ms
npm timing action:refresh-package-json Completed in 16ms
npm info lifecycle jquery@3.5.1~preinstall: jquery@3.5.1
npm timing action:preinstall Completed in 3ms
npm info linkStuff jquery@3.5.1
npm timing action:build Completed in 3ms
npm info lifecycle jquery@3.5.1~install: jquery@3.5.1
npm timing action:install Completed in 1ms
npm info lifecycle jquery@3.5.1~postinstall: jquery@3.5.1
npm timing action:postinstall Completed in 1ms
npm timing stage:executeActions Completed in 1513ms
npm timing stage:rollbackFailedOptional Completed in 1ms
npm timing stage:runTopLevelLifecycles Completed in 3092ms
npm info lifecycle undefined~preshrinkwrap: undefined
npm info lifecycle undefined~shrinkwrap: undefined
npm notice created a lockfile as package-lock.json. You should commit this file.
npm info lifecycle undefined~postshrinkwrap: undefined
npm WARN registry@1.0.0 No description
npm WARN registry@1.0.0 No repository field.

+ jquery@3.5.1
    • You can see that the jquery package was downloaded from the Falcon NPM group warehouse

Writing custom vue components

Create project

  1. Using scaffold to create project

    $ vue init webpack-simple vue-npm-demo

? Project name vue-npm-demo
? Project description A Vue.js project
? Author chengaofeng <chengaofengcool@163.com>
? License MIT
? Use sass? Yes

   vue-cli · Generated "vue-npm-demo".

   To get started:
   
     cd vue-npm-demo
     npm install
     npm run dev

  2. Follow the prompts to execute the CD Vue NPM demo, npm install, npm run dev commands in turn

  3. The first page of the project will be opened with the default browser after startup

New vue component

  1. Import projects into your IDE

  2. Create components directory under src to store our own vue components

  3. Create first Vue under components- demo.vue file

    <template>
  <div id="app">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
  export default {
    name: 'first-vue-demo',
    data () {
      return {
        msg: 'test vue npm pack'
      }
    }
  }
</script>

<style lang="scss">
  #app {
    text-align: center;
    color: #15dc1f;
    margin-top: 100px;
  }
</style>

  4. Create a webpack packaged portal file in the project root directory index.js (in webpack.config.js This file will be configured and used in. The contents of the file are as follows (append the logic of exporting custom components)

    import vuedemo from './src/components/first-vue-demo.vue'

export default vuedemo

  5. The final directory structure is as follows

  6. edit webpack.config.js , specify information about component packaging

    The modification content is the part in the red box in the figure, as follows

    const NODE_ENV = process.env.NODE_ENV
module.exports = {
  entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'vue-nmp-demo.js',
    library: 'vue-nmp-demo',
    libraryTarget: 'umd',
    umdNamedDefine: true

  },
    • In the development environment, use. / src/main.js As an entrance; used in production environments/ index.js
    • Specify the generated file name Vue NMP- demo.js
    • Module name is Vue NMP demo

  7. edit package.json File, append the main attribute (it is the entry for other projects to import this module)

    "main": "./dist/vue-nmp-demo.js",

  8. edit index.html , import the js file we exported

  9. Add our components to App.vue So we can test our components directly

    Three lines of code in the red box in the figure are added

Compile and run vue component project

  1. Execute the following command to start compiling the project

    $ npm run build 

> vue-npm-demo@1.0.0 build /Users/chengaofeng/workspace/vue/npm/vue-npm-demo
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 2aa47e6d35b583e59ab8                                                          
Version: webpack 3.12.0
Time: 7450ms
              Asset     Size  Chunks             Chunk Names
    vue-nmp-demo.js  5.71 kB       0  [emitted]  main
vue-nmp-demo.js.map  49.3 kB       0  [emitted]  main

  2. View compilation results

    $ ls dist/
vue-nmp-demo.js		vue-nmp-demo.js.map

  3. Restart project

    $ npm run dev

Package and upload vue components to nexus

  1. modify package.json Change the private property to false

    "private": false,

  2. Create the role NX deploy on nexus, and grant the permission to publish npm

  3. Create a user deployer and assign the role [NX deploy]

  4. Activate npm realm

  5. Create the. npmignore file in the project directory to exclude the files that do not need to be uploaded

    .DS_Store
node_modules/
build/
config/
static/
.babelrc
.editorconfig
.gitignore
.npmignore
.postcssrc.js
index.html
package-lock.json
npm-debug.log*
yarn-debug.log*
yarn-error.log*
src/
#Editordirectoriesandfiles
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

  6. Execute npm login command to authenticate with nexus

    $ npm login --registry='http://localhost:8085/repository/falcon-npm-hosted/'
Username: deployer
Password: 
Email: (this IS public) deployer@dev.com
Logged in as deployer on http://localhost:8085/repository/falcon-npm-hosted/.
    • Note that the registry used here is a repository of hosted type
    • Enter the user name (deployer), password and mailbox information as prompted

  7. Upload npm package

    $ npm publish --registry='http://localhost:8085/repository/falcon-npm-hosted/'
npm notice 
npm notice 📦  vue-npm-demo@1.0.0
npm notice === Tarball Contents === 
npm notice 82B    index.js                
npm notice 5.7kB  dist/vue-nmp-demo.js    
npm notice 2.6kB  webpack.config.js       
npm notice 946B   package.json            
npm notice 49.3kB dist/vue-nmp-demo.js.map
npm notice 327B   README.md               
npm notice === Tarball Details === 
npm notice name:          vue-npm-demo                            
npm notice version:       1.0.0                                   
npm notice package size:  14.5 kB                                 
npm notice unpacked size: 59.0 kB                                 
npm notice shasum:        d9823effabae65454e8d3f20ce93fb634a0d644b
npm notice integrity:     sha512-YANnHr+V3h83N[...]6K8/KC5srdW1Q==
npm notice total files:   6                                       
npm notice 
+ vue-npm-demo@1.0.0

    • You can configure registry to package.json In the publishConfig property of the file

    • View in nexus

Using custom component packages in new projects

  1. Create a new vue scaffold project, which depends on our customized components

    $ vue init webpack-simple use-selfdefine-vue

  2. modify package.json File, add our custom component package to the dependency

  3. stay App.vue Introducing our components in

  4. Execute npm install, npm run dev to start a new project

  5. You can also dynamically import custom components

    modify App.vue , dynamically introduce our customized components

Problems encountered

  1. The following error occurred while executing the npm install command

    npm ERR! code E401
npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/chengaofeng/.npm/_logs/2020-05-07T12_50_24_551Z-debug.log

    • npm Bearer Token Realm needs to be activated in realm of nexus

    • In addition, the group repository needs to be authenticated

      $ npm login --registry='http://localhost:8085/repository/falcon-npm-group/'

  2. The following error occurred when executing the npm publish command

    npm ERR! code E401
npm ERR! Unable to authenticate, need: BASIC realm="Sonatype Nexus Repository Manager"

    • When executing npm publish, you need to use -- registry to specify that the uploaded repository is a hosted repository

    • Before executing publish, you need to authenticate the hosted repository

      $ npm login --registry='http://localhost:8085/repository/falcon-npm-hosted/'

Tags: Javascript npm Vue nexus JQuery

Posted on Tue, 09 Jun 2020 02:46:08 -0400 by ryanpaul

Hot Tags

©2023 Programmer Help