@vue/cli脚手架创建vue3项目，js+vue-cli生成mpm包，package.json中main，module，exports三种方式的使用，自定义入口文件index.js

已于 2024-05-07 14:43:02 修改
阅读量1k 收藏 18
点赞数 6
分类专栏： npm package 文章标签： javascript vue.js json
于 2024-05-07 14:40:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44434938/article/details/138521219
版权

提示：vue3依赖14.15.1 或更高版本的 Node.js

文章目录

前言

使用@vue/cli脚手架vue create创建

一、查看nodejs版本

1、查看nodejs版本

node -v

在这里插入图片描述

二、创建项目

vue create package-v3-cli

在这里插入图片描述
3、目录结构
在这里插入图片描述

三、安装依赖并启动文件

cd package-v3-cli
npm install element-plus --save
npm run serve

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

四、新建、修改组件引用

1、APP.vue

<script setup>
import ColorPicker from './components/colorPicker/Index.vue';
import TabsCom from './components/tabs/Index.vue';

</script>

<template>
  <div>
    <ColorPicker></ColorPicker>
    <TabsCom></TabsCom>
  </div>
</template>

<style scoped>

</style>

2、src/components/colorPicker/Index.vue

<template>
  <div class="demo-color-block">
    <span class="demonstration">With default value</span>
    <el-color-picker v-model="color1" />
  </div>
  <div class="demo-color-block">
    <span class="demonstration">With no default value</span>
    <el-color-picker v-model="color2" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const color1 = ref('#409EFF')
const color2 = ref()
</script>

<style>
.demo-color-block {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.demo-color-block .demonstration {
  margin-right: 16px;
}
</style>

3、src/components/tabs/Index.vue

<template>
    <el-tabs v-model="activeName" class="v3-js-tabs" @tab-click="handleClick">
      <el-tab-pane label="User" name="first">User</el-tab-pane>
      <el-tab-pane label="Config" name="second">Config</el-tab-pane>
      <el-tab-pane label="Role" name="third">Role</el-tab-pane>
      <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
    </el-tabs>
  </template>
  <script setup>
  import { ref } from 'vue'
  
  const activeName = ref('first')
  
  const handleClick = (tab, event) => {
    console.log(tab, event)
  }

  </script>
  
  <style>
  .v3-js-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
    background: #eee;
  }
  </style>

4、package.json关掉eslint

{
  "name": "package-v3-cli",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.7.2",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
       "vue/multi-word-component-names": "off"
     }
 
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

5、修改main.js

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(ElementPlus);

app.mount('#app');

6、目录结构
在这里插入图片描述

5、预览
在这里插入图片描述

五、配置打包package

1、新建src/index.js

//index.js
import './assets/main.css'
import ColorPicker from '@/components/colorPicker/Index.vue';
import TabsCom from '@/components/tabs/Index.vue';

 
export { ColorPicker,TabsCom} //实现按需引入*
 
 
const components = [ColorPicker,TabsCom];
const install = function(App, options) {
    components.forEach((component) => {
        App.component(component.name,component);
    });
};
export default { install } // 批量的引入*

2、修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  publicPath:'./',
  devServer:{
    allowedHosts:"all",
      historyApiFallback:true,
      host: '127.0.0.1',
      port: 80,

  },
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
      .add('/dist')//刚才新建的目录
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  },
  css: {
    extract: true,
  },
})

3、修改package.json——main

{
  "name": "package-v3-cli",
  "version": "1.0.17",
  "private": false,
  "main": "./dist/package-v3-cli.umd.js",
  "files": ["dist"],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name package-v3-cli --dest dist src/index.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.7.2",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
       "vue/multi-word-component-names": "off"
     }
 
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

引用

import {ColorPicker,TabsCom} from 'package-v3-cli';
import 'package-v3-cli/dist/package-v3-cli.css';

<template>
  <div>
    <h1>我是测试npm包package-v3-cli页面</h1>
    <ColorPicker></ColorPicker>
    <TabsCom></TabsCom>
  </div>
</template>

在这里插入图片描述

4、修改package.json——module

{
  "name": "package-v3-cli",
  "version": "1.0.15",
  "private": false,
  "module": "./dist/package-v3-cli.umd.js",
  "files": ["dist"],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name package-v3-cli --dest dist src/index.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.7.2",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
       "vue/multi-word-component-names": "off"
     }
 
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

引用

import {ColorPicker,TabsCom} from 'package-v3-cli';
import 'package-v3-cli/dist/package-v3-cli.css';

<template>
  <div>
    <h1>我是测试npm包package-v3-cli页面</h1>
    <ColorPicker></ColorPicker>
    <TabsCom></TabsCom>
  </div>
</template>

在这里插入图片描述

5、修改package.json——exports
可以自定义引用css的名称和方式

{
  "name": "package-v3-cli",
  "version": "1.0.18",
  "private": false,
  "files": ["dist"],
  "exports": {
    "./style.css":"./dist/package-v3-cli.css",
    ".": {
      "import": "./dist/package-v3-cli.umd.js"
    }
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name package-v3-cli --dest dist src/index.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.7.2",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
       "vue/multi-word-component-names": "off"
     }
 
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

引用——可以自定义引用css的名称和方式

import {ColorPicker,TabsCom} from 'package-v3-cli';
import 'package-v3-cli/style.css';

<template>
  <div>
    <h1>我是测试npm包package-v3-cli页面</h1>
    <ColorPicker></ColorPicker>
    <TabsCom></TabsCom>
  </div>
</template>

在这里插入图片描述

六、打包发布

1、打包

npm run build

在这里插入图片描述
在这里插入图片描述

2、登录

npm config set registry https://registry.npmjs.org
npm login

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
3、发布

npm publish

在这里插入图片描述

七、安装使用

1、安装

npm install package-v3-cli --save

在这里插入图片描述
2、引用
不同入口和导出，引用有区别，在上面配置package.json时，做了展示

3、预览
在这里插入图片描述

七、自定义入口文件index.js

1、项目根目录下新建index.js

import {ColorPicker,TabsCom} from './dist/package-v3-cli.umd.js';
import './dist/package-v3-cli.css'

// 引用
// import { SourcePicker } from 'package-v3-cli'
export {ColorPicker,TabsCom};

// 引用
// import packageV3Cli from 'package-v3-cli'
// const { SourcePicker } = packageV3Cli
export default {ColorPicker,TabsCom};

2、package.json也是用main，module，exports三种方式其中一种就可以

"files": ["dist","index.js"],
"main": "./index.js",
"module": "./index.js",
"exports": {
  "./style.css":"./dist/package-v3-cli.css",
  ".": {
    "import": "./index.js"
  }
},

3、完整配置

{
  "name": "package-v3-cli",
  "version": "1.0.19",
  "private": false,
  "main": "./index.js",
  "module": "./index.js",
  "files": ["dist","index.js"],
  "exports": {
    "./style.css":"./package-v3-cli.css",
    ".": {
      "import": "./index.js"
    }
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name package-v3-cli --dest dist src/index.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "element-plus": "^2.7.2",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {
       "vue/multi-word-component-names": "off"
     }
 
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

4、打包后结构多一个index.js
在这里插入图片描述
在这里插入图片描述
4、使用
因为在index.js引入了./dist/package-v3-cli.css
在这里插入图片描述
所以在引入的时候，无需在引入css 直接引用模块即可

总结

踩坑路漫漫长@~@

longlongago~~
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
exports和module.exports的区别
trust_future99的博客
11-12 162
exports导出的是一个实例对象。 要调用导出的方法或者属性时，要用当前实例对象去调用。如下述代码中，导出的是builds对象，使用getAllBuilds方法时要调用此方法。 exports.js const builds = { // Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify...
创建vue3项目的三种方式
qi199531的博客
06-28 1万+
安装命令：截图： 安装命令：截图： 安装命令：截图：
Vue3项目搭建流程
最新发布
冲冲冲
06-12 572
git初始化：打开终端，执行命令git init（这里需要在vscode中打开Git Bash终端，而不是powershell）执行完成后会在项目目录生成一个.husky文件夹安装 lint-staged （依然在Git Bash终端执行此命令）配置// ... 省略 ...// ... 省略 ...修改 .husky/pre-commit 文件安装插件 pinia-plugin-persistedstate在stores下新建index.js。
如何创建vue3项目
m0_69502730的博客
08-24 2万+
如何创建vue3项目
Vue3 项目创建
qq_48294048的博客
10-10 2万+
vue 3需要node10以上版本node官网下载地址以往的版本 | Node.js。
vue3 配置文件（跨域 和 多页面开发）
RainCat_zZ的博客
08-25 1111
module.exports = { // 跨域配置 devServer: { //记住，别写错了devServer//设置本地默认端口 选填 port: 8089, proxy: { //设置代理，必须填 '/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定 target: 'h.
vue cli3 参数配置
qq_43344133的博客
11-29 613
vue cli3 配置 module.exports = { // 部署应用包时的基本URL。 // https://www.app.com/ => '/' // https://www.app.com/my-app/ => '/my-app/' // 如果值为空字符串 '' 或者是相对路径 './', 都会被链接为相对路径 baseUrl: process.en...
详解vue-cli 脚手架项目-package.json
12-08
使用vue-cli脚手架新建的项目中，含有package.json。 package.json是npm的配置文件，里面设定了脚本以及项目依赖的库。 npm run dev 这样的命令就写在package.json里。 { "name": "vue-manage", // 项目名称 ...
使用@vue/cli脚手架vue create创建
04-10
在Vue.js开发中，`@vue/cli`是一个非常重要的工具，它是Vue官方提供的命令行界面(CLI)服务，用于快速搭建Vue项目。本篇文章将详细解释如何使用`vue create`命令来创建一个Vue项目，并介绍相关配置文件的作用。 首先...
package.json中main，module，exports三种方式的使用，自定义入口文件index.js
05-07
对于Vue.js项目，尤其是由`@vue/cli`生成的Vue3项目，`package.json`中的`main`、`module`和`exports`字段用于指定不同环境下的入口文件，这有助于优化加载和打包过程。本文将深入探讨这三种方式的使用以及如何...
基于Vue-cli快速搭建项目的完整步骤
12-09
vue-cli 是一个官方发布 vue.js 项目脚手架，Vue-cli可以快速帮助我们创建一个项目，这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。 下面话不多说了，来一起看看详细的介绍吧 一、准备工作 在使用...
模块的导入导出、引入、使用、export、exports、default、require、import、module、as
软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
04-20 1820
模块的导入导出、引入、使用、export、exports、default、require、import、module、as
手把手教你搭建vue3项目
weixin_43618130的博客
03-02 5万+
使用VUE3开发很久了，但一直没进行总结和记录，忙里偷闲整理搭建一套VUE3项目，正好记录一下，按照我的教程让你开启vue3之旅吧！
创建一个vue3项目
dreams_dream的博客
07-27 1万+
创建一个vue3项目
vue3笔记-脚手架篇
qq_43352505的博客
07-19 4281
vue2与vue3的区别 vue项目脚手架 父子通信（props，属性透传，子传父） 跨级通信 动态组件 异步组件 插槽（slot，具名插槽，作用域插槽）生命周期 自定义指令
小满Vue3第四十三章（webpack 构建 Vue3项目）
qq1195566313的博客
09-01 6578
5.编写webpack config js。
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）
热门推荐
逆境清醒的博客
03-19 6万+
vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite + Vue 项目 五、Vite + Vue 项目目录结构 六、Vite.config.ts配置
关于vue3+vite完全放弃modules.export导出方式后,进行rem适配的一些注意点
freydog的博客
07-29 3560
rem适配 vue3 vite
module.exports、exports模块化导入导出方式
weixin_30706507的博客
03-08 1992
在模块化开发过程中经常遇到模块的导出导入。涉及到require 、export、module.exports、exports这些关键词。但是其中究竟有什么区别。自己还真的经常弄糊涂。 索性自己好好缕一缕。 首先呢，总体上区分两大规范CommonJS模块规范和ES6模块规范 require: node 和 es6 都支持的引入 export / import : 只有es6 支持的导...
@vue/cli 5.0.8 创建vue项目
06-06
### 回答1： @vue/cli 5.0.8 是一个开发工具，用于创建和管理 Vue.js 项目。它提供了一个集成的命令行界面，可用于快速创建基于 Vue.js 的应用程序，并且使项目的开发和维护变得更加容易。 使用@vue/cli 5.0.8 和对应的命令，可以轻松地建立一个全新的 Vue.js 项目。基于常规的 MVVM 模式设计，Vue 项目提供了良好的模块化和组件化能力，使得开发过程可以更快更高效。 具体的安装及使用方式如下： 1. 在终端输入以下命令来安装@vue/cli npm install -g @vue/cli 2. 在终端中输入以下命令来创建新项目 vue create project_name project_name 是新项目的名称， 也可以通过以下命令来配置项目。 vue create --preset preset_name project_name preset_name 是已有的预设配置名称，可以提前在本地或远程定义的预设中选取。 3. 根据提示在安装器中选择相关选项，比如选择是否使用Babel, 选择eslint标准等等， 来创建自定义的vue项目。 4. 创建完成的vue项目结构如下： - public 文件夹: 存放项目公共资源和页面入口文件 - src 文件夹：存放项目源代码 - node_modules: 存放项目依赖的nodejs模块 - package.json: 项目配置信息及依赖管理 总之，使用@vue/cli 5.0.8能够大大提高Vue.js项目的开发效率和质量，是一个非常实用的工具。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值