vue构建项目

原创于 2021-07-31 14:02:48 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

24 篇文章

订阅专栏

本文档介绍了如何使用VueCli进行项目中的基础组件封装和优化。首先，通过全局安装VueCli，然后创建项目并安装less及less-loader。接着，编写和优化单个组件代码，运行`vue serve Info001/index.vue`预览效果。最后，使用`vue build --target lib --name index ./Info001/index.vue`进行构建，打包结果位于dist目录下，适合于lib目标构建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想把项目公司一些基础公用组件进行封装，所以需要对单组件进行开发优化。使用到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中