基于 iview Tabs 组件实现 功能：为每个 tab 动态创建不同的、特定的组件内容，而不需要大量的 import 组件并进行 component 注册 Index.vue<template><div class="content-left-menu"><div class="item-contain layout-content"><Tabs class="cmcc-ivu-tab2" type="card" closable><TabPane v-for="k in zj" :label="k.label" ><loader :vueName="k.vueName"></loader></TabPane></Tabs></div></div> </template> <script>import ...
本人主要做c#winform应用，刚接触vue，发现用vue做单页面应用的比较多，多页面的资料很少，特别是用vue3.0版本做多页面的资料，更少，所以自己整理一下，结合bootstrap和jquery，也可以给有需要的同行做个参考。 1.首先用 vue --version 命令查一下安装的vue-cli版本，要3.x版本，我原先装的是2.9.6版本的2.卸载vue-cli,执行命令：cnpm uninstall -g vue-clinpm uninstall -g vue-cli ,执行完就好了 3.安装vue-cli3.x版本：cnpm in...
前言在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI_, _Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: npm install vuetify // or yarn add vuetify但是当我们自己开发了一个 _UI Component_, 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗? 这样做是很方便, 但是有两个问题: 当该 component 需要更新时, 我们需要手动维护所有用到该 component 的更...
1.准备工作。 1.首先准备安装Vue及Vue-CLI $ npm install vue $ npm install -g @vue/cli2.其次下载Tomcat tomcat.apache.org/index.html 任选一个版本，我测试用的是macOS，所以下载了第二个压缩包? 下载到本地后，解压缩，并且将解压缩后的文件夹复制到以下路径下，其中电脑名称就是你的用户名称。 /Users/{电脑名称}/Library ，并且重命名为ApacheTomcat，这里要提一下，在这个文件夹下有个webapps，双击进去，会有很多文件，不...
在终端中运行以下命令: vue create xxx // xxx为项目名称，例如 vue-project然后，系统会提示我们选择默认预设或手动选择功能。使用向下箭头键，我们手动选择功能，然后按Enter键。然后，我们将看到一系列功能选项。使用向下箭头键，我们将向下移动并使用空格键选择需要的功能，然后按回车键。Linter / Formatter 就是代码风格。 我们将使用 ESLint + Prettier我们将在保存时添加Lint的附加功能。我们将选择单独的配置文件。我们...
auto-vue-fileauto create .vue file by shell command通过终端自动创建vue文件前言：1: 我们在写xxx.vue页面文件的时候，一般都要写这些重复的代码：<template><div class="zlj-comp-ct">zlj组件</div> </template> <script> export default {name: zlj } </script> <style lang="scss" scoped> .zlj-comp-ct {} </style>2:写组件的时候可能还要在components目录下面新建一个目录:xxx,里面是xxx.vue和index.js比如myForm组件// my...
准备工作 1.判断是否需要FQ或安装镜像，镜像一般可安装国内淘宝镜像，详情可看这里：cnpmnpm install -g cnpm --registry="cnpm"全局安装淘宝cnpm。 2.开发工具选择很多，VUE无专用开发工具，开发项目多以SPA形式体现，本例使用 Visual Studio Code。 3.调试工具选择很多，官方推荐 vue-devtools 。 安装方法：FQ或者github主页。https://github.com/vuejs/vue-devtools下载压缩包，解压到Chrome扩展程序。 环境搭建 1.安装 Node.j...
本文将通过解读render函数的源码，来分析vue中的vNode是如何创建的。在vue2.x的版本中，无论是直接书写render函数，还是使用template或el属性，或是使用.vue单文件的形式，最终都需要编译成render函数进行vnode的创建，最终再渲染成真实的DOM。 如果对vue源码的目录还不是很了解，推荐先阅读下 深入vue -- 源码目录和编译过程。 01 render函数 render方法定义在文件 src/core/instance/render.js 中Vue.prototype._render = funct...
1：安装node前端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。2：查看node的版本号 输入命令：node -v;3：安装淘宝npm镜像由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可...
用vue-cli脚手架可以快速的构建出一个前端vue框架的项目结构。今天小编我便来记录一下vue-cli脚手架的构建项目的经验。 1、首先便是要搭建好vue-cli脚手架工具才行滴。搭建vue-cli脚手架工具的方法便是如图所示这样滴。2、然后指定一个目录并用vue init webpack+项目名称便可得到前端项目的结构了哦。3、接着便是一路回车来确认项目所用到的一些语法和测试包即可。4、接着便可看到依赖包已经配置成功了。可以用cd来进入项目里边并执...
Vue是当下很流行的前端框架，现在我来分享一下用Vue创建项目的流程 1、新建一个文件夹，用来创建Vue项目。2、进入到该文件夹，在地址栏内写‘cmd，回车。就会弹出命令行窗口3、进入正式cmd操作，创建个vue项目，命令行操作指令：vue init webpack project, project是你创建的文件夹名。4、cd project，进入文件夹5、安装依赖：npm install 等待即可，因为服务器在国外，所以要慢。完成后如下图6、现在已经创建好了，那就让项目先运...
本文实例讲述了vue自定义指令的创建和使用方法。分享给大家供大家参考，具体如下： 一、自定义指令的创建和使用 Vue自带的指令很多，v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text... 但是这些指令都是比较偏向于工具化，有些时候在实现具体的业务逻辑的时候，发现不够用，如何来自定义指令. 1、自定义指令 ① 创建 new Vue({directives:{change:{bind:function(){},update:function(){},unbind:function...
前言 在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。 在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如<template><header></header>...<content></content>...<footer></footer> </template>当用户的某个行为触发表单时（例如注册、建立内...
创建Vue项目 以及引入Iview官方文档# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法。 我创建Vue项目过程$ vue init webpack vue-iview ? Project name vue-iview ? Project description A Vue.js project ? Author yo...
步骤创建 vue 的脚手架npm install -g @vue/cli vue init webpack绑定 git 项目cd existing_folder git init git remote add origin http://gitlab.alipay-inc.com/ampg/my-projec.git git add . git commit git push -u origin master写组件创建组件 src/components/xxx.vue 例如： <template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2></div> </template><script> export default {name: HelloWorld,data (...