vue构建项目

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414926.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

前端学习(2689):重读vue电商网站10之表格展开页

只需要将 el-table-column 中 type 属性设为 expand 即能将表格进行展开。 实现效果如下:

Python day 9(6) 调试

程序能一次写完并正常运行的概率很小,基本不超过1%。总会有各种各样的bug需要修正。有的bug很简单,看看错误信息就知道,有的bug很复杂,我们需要知道出错时,哪些变量的值是正确的,哪些变量的值是错误的&…

AppTheme 属性详解

<style name"AppTheme" parent"Theme.AppCompat.Light.NoActionBar"><!--Appbar背景色&#xff0c;应用的主要色调&#xff0c;actionBar默认使用该颜色--><item name"android:colorPrimary">color/material_animations_prima…

yarn 安装 sass

将 node-sass 设置全局镜像 // 命令行输入 npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/安装 yarn add node-sass

前端学习(2690):重读vue电商网站11之使用树形控件 el-tree

对于分配权限一栏&#xff0c;我们需要如下效果&#xff1a; 相关配置属性&#xff1a; 其中 data 为我们的数据源&#xff0c;props 为我们在 tree组件显示的文本内容。通过设置 node-key可以让每个树节点作为唯一标识的属性&#xff0c;整棵树是唯一的&#xff1b;通过设置 …

Android 播放raw文件夹下音频文件,本地MP3文件播放,播放云端MP3文件,获取MP3文件播放时长

1、复制音频文件到raw文件夹下 2、实例化音频文件 private final MediaPlayer.OnCompletionListener beepListener new MediaPlayer.OnCompletionListener() { // 声音public void onCompletion(MediaPlayer mediaPlayer) {mediaPlayer.seekTo(0);} }; private static final …

前端学习(2691):重读vue电商网站12之获取选中节点的keys:

首先&#xff0c;给我们对话框的确定按钮绑定一个事件。 主要使用 tree 组件提供的两个方法 getCheckedKeys 和 getHalfCheckedKeys来分别返回目前被选中的节点的 key 所组成的数组和目前半选中的节点的 key 所组成的数组

cmd 【已解决】windows连接手机,运行adb devices提示“unauthorized”

报错截图如下&#xff1a; 问题原因&#xff1a;电脑连接手机。手机未授权 解决方式&#xff1a; 设置----开发者选项-----打开USB调试&#xff0c;出现如下弹框&#xff0c;点击“确定”即可解决问题。 转载于:https://www.cnblogs.com/syw20170419/p/8280291.html

Android 可开关式顶部下拉view

效果&#xff1a; 实现方法 1、layout文件结构 最外部使用相对布局 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:app"http://schemas.android.c…

emit传参,获取返回值

我的需求&#xff0c;子应用调用主应用方法&#xff0c;主应用返回参数。 主应用&#xff1a; methods:{ getToken(callback) {callback(this.$store.state.user.auth)}, }, mounted(){this.$bus.on(getToken, this.getToken) }子应用&#xff1a; mounted(){ this.$qkBus.e…

前端学习(2692):重读vue电商网站13之使用动态编辑标签

实现效果如下&#xff1a; 通过 v-if 的 boolean值来动态变化是否显示文本框还是 button 按钮。通过 v-model 双向绑定来实现文本框内容的监听。 由于每一行需要设置文本框的显示与隐藏&#xff0c;而且数据是共享的。我们需要通过 scope来获取每一行的值来进行绑定&#xff0…

C++ 宏、范型和RTTI 浅析

【摘要】 RTTI(Run-Time Type Identification)是面向对象程序设计中一种重要的技术。现行的C标准对RTTI已经有了明白的支持。只是在某些情况下出于特殊的开发须要&#xff0c;我们须要自己编码来实现。本文介绍了一些关于RTTI的基础知识及其原理和实现&#xff0c;并分析…

宝塔面板解决跨域

1、找到宝塔面板配置nginx文件的地方 2、增加如下代码 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods POST,PUT,GET,DELETE; add_header Access-Control-Allow-Headers version, access-token, user-token, Accept, apiAuth, User-Agent…

Android 底部上拉抽屉view

module链接&#xff1a;https://download.csdn.net/download/meixi_android/10839835 接入module方法&#xff1a;https://blog.csdn.net/meixi_android/article/details/84655666 1、activity实现步骤 layout文件布局——DrawerLayoutContent_ID是抽屉内容id&#xff0c;dra…

前端学习(2693):重读vue电商网站14之步骤条的使用与美化

以下就是步骤条使用的核心代码&#xff0c;其中 active 绑定的是每一个 step 的下标&#xff0c;默认从 0 开始。其次&#xff0c;我们可以设置 aligin-center 属性来让我们的步骤条进行居中。el-step就是每一个步骤进度。 Javascript <!-- 步骤条区域 --> <el-steps…

启动项目时,运行其他方法

最近转学java&#xff0c;记录点滴 Component public class Test implements ApplicationRunner {Overridepublic void run(ApplicationArguments args) throws Exception {System.out.println("1234");} }主要是继承ApplicationRunner,并实现run方法

BOM--window对象

BOM 的核心对象是window&#xff0c;它表示浏览器的一个实例。在浏览器中&#xff0c;window 对象有双重角色&#xff0c;它既是通过JavaScript 访问浏览器窗口的一个接口&#xff0c;又是ECMAScript 规定的Global 对象。这意味着在网页中定义的任何一个对象、变量和函数&#…

Android 固定式底部上滑抽屉view

1、自定义view BottomDrawerLayout /*** 作者&#xff1a;created by meixi* 邮箱&#xff1a;15913707499163.com* 日期&#xff1a;2018/12/10 11*/public class BottomDrawerLayout extends ViewGroup {private static final String TAG "BottomDrawerLayout";p…

前端学习(2694):重读vue电商网站15之阻止页签tabs切换

主要函数如下&#xff1a; 在我们的 tabs 标签页添加一个 before-leave 函数 然后在 methods 中定义&#xff0c;根据第一个标签页的逻辑来阻止标签页的切换。