vue构建项目

最新推荐文章于 2024-04-29 12:18:25 发布

曹天骄

最新推荐文章于 2024-04-29 12:18:25 发布

阅读量112

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/solocao/article/details/119271923

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

想把项目公司一些基础公用组件进行封装，所以需要对单组件进行开发优化。使用到Vue Cli

官方文档：https://cli.vuejs.org/zh/guide/build-targets.html

1、一个新环境，需要安装Vue Cli

npm install -g @vue/cli
npm install -g @vue/cli-service-global

2、创建项目(已经在事先创建目录下，使用.)

vue create .

3、安装less

npm install less less-loader@6.1.1

4、开始写代码

5、运行命令跑起来

vue serve Info001/index.vue

6、效果如图

7、构建vue build
重要参数--target

目标	描述
app	应用（默认）
lib	组件
wc	浏览器组件
wc-async	异步浏览器组件

这里我们使用

vue build -t lib -n index ./Info001/index.vue

效果如下：

8、打包结果在dist中

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

曹天骄

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

无需任何配置，预览、构建单个的vue文件

null

05-09

590

快速原型开发

Vue3 & 详解 vue-cli 使用 --target lib 打包的方式

cookcyq__的博客

10-15

6433

目前网上大部分的打包流程都不能满足我的理解和需求，而官方的解释也只说明一半，这次我就干脆将 vite/vue-cli 这两者的打包流程详细梳理下。在 vue-cli 使用打包项目后，默认会提供一个入口（通常是 index.html），然后引入一个 js 入口文件完成页面的渲染。其实 vue-cli 还支持将项目作为一个库的方式来进行打包，这里需要借助命令，此命令会将入口文件打包成一个库吗，具体可参考官方解释接下来我会逐步详解如何构建属于自己的库。

参与评论您还未登录，请先登录后发表或查看评论

npm（六）：使用Vue CLI构建 lib 发布npm包全流程

知之为知之，不知为不知

10-06

1万+

使用Vue CLI 通过--target lib 将一个单独的入口构建为一个库，本文重点在于组件编写过程，在打包脚本配置、全局组件、局部组件、组件包样式修改、共享全局样式变量、图片资源、背景图片、字体、iconfont、完整引入、局部引入等细节方面有详细的阐述 npm包构建并发布手把手教程...

vue3 开发中的踩的坑

04-29

1005

vue3 开发中的踩的坑

2023 年最新前端 Vue 项目重构总结

油墨香^-^的博客

02-14

847

因为公司的产品是把同类型的业务软件在不同电商平台上架，所以新开的项目是把老代码移植过来,删改拼凑后上架。因此文件目录零散，引入导出混乱，代码冗余，风格不够统一规范。这些毛病导致代码可读性和维护性很低，且样式冲突很多，奇怪的难复现的bug也很多。我就计划在迭代填坑中，对项目进行一次改造优化。

Vue构建项目所需离线文件

03-30

在"Vue构建项目所需离线文件"中，提供的`webpack`文件夹包含了用于离线构建Vue项目的必要配置和工具。这意味着你可以在没有网络连接的情况下，利用这些预设的配置来搭建和构建Vue项目，这对于开发环境不稳定的场景...

Vue 基于vite构建vue3项目以及基础语法演示

最新发布

07-17

Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础语法演示Vue 基于vite构建vue3项目以及基础...

vue3项目模板，优雅的vue3项目组织.zip

11-02

Vue3 是一个流行的前端JavaScript框架，用于构建用户界面。它提供了许多高级特性和优化，使得开发者可以更加高效地开发Web应用程序。"优雅的vue3项目组织"是一个Vue3项目的模板，旨在提供一种良好的代码结构和组织...

详解vue-cli 构建Vue项目遇到的坑

08-29

在使用 Vue CLI 构建项目时，可能会遇到编译后、js、css 等相对路径和绝对路径的问题。解决方案是通过在 config/index.js 文件中配置 build 选项，例如： ``` module.exports = { // ... build: { env: require...

webpack+vue2构建vue项目骨架的方法

08-28

在开始构建项目之前，我们需要先初始化项目。使用npm init命令可以快速初始化项目，并生成一个package.json文件，该文件主要存放项目依赖目录和配置项目启动命令。二、安装依赖在安装依赖之前，我们需要首先安装...

Vue CLI

weixin_45845391的博客

01-16

747

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 实现的交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global实现的零配置原型开发。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。

Vue组件打包成库和使用库的方法

lweiyue的专栏

09-02

5021

一、开发组件开发组件的过程并无特殊之处，跟平时在Vue项目里定义component是一样的。有一点需要注意的是，平时在Vue项目里，组件的name可以不写，但如果要打包成库，组件的name必须写。为了描述方便，我们把将要打包的组件定义为MyCom1、MyCom2。其示例代码如下： <template> <div> </div> </template> <script> export default { name: "MyC..

VUE 2.0 项目搭建流程

GIS（地理信息系统）

07-13

2726

VUE 2.0 项目搭建流程

vue cli3 build --target lib 生成的包静态资源引用路径错误怎么办

08-12

2304

我用vue cli3 库方式打包出自己的组件后，生成了一堆小文件，这是主文件去引用其他静态资源出现路径错误。引用到了绝对路径，各路大神有遇到过类似的问题嘛。麻烦指导一下小弟，不胜感谢！以下是我报错的信息打包引用该组件后，路径是直接引用了绝对路径，没有走moudles内部相对路径我的文件 ...

Vue CLI 3.x的使用(2)-安装

事非宜，勿轻诺；苟轻诺，进退错。

09-05

2383

Vue CLI v3.x官方教程：https://cli.vuejs.org/guide/ 关于与先前版本的说明 1. 包名由vue-cli变更为@vue/cli； 2. 若需要全局安装旧版本的vue-cli(1.x或2.x)，则需要先卸载已安装的版本，卸载指令：npm uninstall vue-cli -g或yarn global remove vue-cli。 Node版本要求 N...

Vue项目 build构建

热门推荐

旅行的风筝

09-18

1万+

这时候项目已经完成，需要发布到网站上了。这时候就需要将此项目构建成需要发布的版本。命令：npm run build运行这句命令后，项目将会被构建到dist文件夹，文件夹有三个部分：dist ├── index.html └── static ├── css │ ├── app.07f748db13e7a96b56e218ff0718169a.css │ └── a

vue中的target与currentTarget区别

MAXLZ的博客

11-19

1987

currentTarget。target

vue - vue-cli2脚手架搭建build文件夹详解

qq_39748755的博客

04-21

3507

build.js 构建环境下的配置: loading动画删除创建目标文件夹 webpack编译;输出信息 //这是vue-cli脚手架工具的生产环境配置入口 package.json中的"build": "node build/build.js"的直接指向。 // js的严格模式 'use strict' //检查node+npm的...

Vue2项目打包

baidu_24346235的博客

10-19

2145

使用npm run build进行打包，或者通过查看项目中的package.json文件中的bulid的打包命令。打包完成后，可以看到有提示build complete。 build完成时可以在项目中发现多了一个dist文件夹，里面包括一个css文件，js文件和index.html。如下图：项目最终上线的内容是打包压缩的，也就是上面的dist文件。...

如何用vue构建项目？

02-01

首先，你需要安装 Node.js 和 npm（Node.js 的包管理工具）。然后，使用 npm 安装 Vue 脚手架（也叫 vue-cli）： ``` npm install -g @vue/cli ``` 安装完成后，你可以使用以下命令创建一个新的 Vue 项目： ``` vue create my-project ``` 在创建项目时，会提示选择一种预设的模板，包括单文件组件和最小化的配置。你也可以选择自定义配置，并选择安装需要的插件和库。创建完成后，你就可以进入项目文件夹，并使用 npm 安装依赖： ``` cd my-project npm install ``` 安装完成后，你就可以使用以下命令启动开发服务器： ``` npm run serve ``` 这样就可以在浏览器中访问项目了。当你对项目进行修改时，开发服务器会自动重新加载页面，方便你调试代码。在开发完成后，你可以使用以下命令构建项目： ``` npm run build ``` 这会在项目的 `dist` 文件夹中生成最终的文件，可以用于部署到生产环境中。希望这些信息能帮助你开始使用 Vue 构建项目。