Vue单文件组件开发实现过程详解_vue.js

来源:脚本之家  责任编辑:小易  

<button @click='onclick'></button><div><mycomponent v-if='showcom'></mycomponent></div>{data: {showcom: false}methods: {onclick: function () {this.showcom = true;}}}Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件[1]  。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合www.zgxue.com防采集请勿采集本网。

第一步:配置环境

基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方 您可能感兴趣的文章:详解.vue文件中监听input输入事件(oninput)vue使用element-ui的e

安装cnpm

的移动端组件库mint-ui实现无限滚动加载更多的方法基于Vue框架vux组件库实现上拉刷 组件库发布到npm详解基于Vue 2.0的模块化前端 UI 组件库小结关于Vue组件库开发详析

npm install -g cnpm --registry=https://registry.npm.taobao.org

文件中进行注册引入。vue官网api中有一个简单的例子,大家可以看一下,但是实际过程中 组件的几种方式总结vue 组件 全局注册和局部注册的实现vue复合组件实现注册表单功

安装@vue/cli

Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js是一

cnpm install -g @vue/cli

访问即可。F12启用开发者调试工具,调试菜单栏选择 Vue 开发过程 1.相关文件说明 bu \\src\\components 目录新建 vue 文件(每一个.vue文件都是一个单独vue组件,用来实现页面

检查版本是否正确

组件化开发是使用什么?? vue-loader么 如果是vue-loader可以通过 require来引入就可以 比如Js文件写到assets/js中 在main.js中可以 require('./src/assets/xxx.js') 如果只是单页

vue --version

React 那样轻松的实现高阶组件。 也正因如此所以我们有必要在实现 Vue 高阶组件之前 Vue 中组件是函数没有问题,不过那是最终结果,比如我们在单文件组件中的组件定义其

使用vue.server和vue.build对*.vue文件进行快速原型开发,需要安装vue serve

①首先新建一个 sotre文件夹,分开维护 actions mutations getters ②在index.js文件中新 vue2.0父子组件间通信的实现方法详解vue2.0组件通信各种情况总结与实例分析vue2.0

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

组件呢?下面是详细的写法。 1、第一步,利用vue-cli创建一个vue前端项目,文件夹如下图 组件开发props验证的实现Vue 组件参数校验与非props特性的方法实例分析编写vue组

新建一个App.vue文件测试安装是否成功:

之前开发项APP项目直接用APICloud+原生js的方式进行编写,整个项目下来发现开发慢,页面代码多且复杂,维护起来相对困难,而且文件大打包之后的APP会比较大,apicloud的框架

<template>2 <h1>Hello world!</h1>3 </template>

在该文件当前路径运行:

vue serve App.vue

打开浏览器输入localhost:8080看到如下画面则运行成功

环境安装到此结束,接下来用一个简单案例来学习vue的单文件组件开发。

第二步:简单案例实战

以一个物品清单为例:

该案例由4个组件构成,分别是:

1. addItem.vue 添加物品

2. item.vue 物品实例

3. items.vue 物品列表

4. changeTitle 改变标题

首先,创建一个项目demo:

vue create demo

项目默认目录如下,启动主页在public, vue源码(包括组件)都存放到src

然后分别编写各组件代码

1. addItem.vue:

<template> <div class="input-group"> <input type="text" class="form-control" placeholder="add shopping list item" v-model="newItem"> <span class="input-group-btn"> <button class="btn btn-primary" @click="emitAdd"> <i class="fa fa-plus-square-o fa-lg"> </i><span>Add</span> </button> </span> </div></template><script>export default { data() { return { newItem: '' } }, methods: { emitAdd() { this.$emit('addItem', this.newItem); } }}</script><style></style>

2. item.vue:

<template> <li :class="{'removed': item.checked}" class="list-group-item"> <div class="checkbox"> <label> <input type="checkbox" v-model="item.checked"> <span>{{ item.text }}</span> </label> </div> </li></template><script>export default { props: ['item']}</script><style>.removed { color: gray;}.removed span { text-decoration: line-through;}</style>

3. items.vue:

<script>import item from './item'export default { props: ['items'], components: { item }}</script><template> <ul class="list-group"> <item v-for="item in items" :key="item.id" :item="item"></item> </ul></template><style></style>

4. changeTitle.vue:

<template> <div> <em>Change the title here:</em> <input type="text" :value="title" @input="onInput"> </div></template><script>export default { props: ['title'], methods: { onInput(event) { this.$emit('input', event.target.value); } }}</script>

最后修改App.vue,导入上面的组件:

<template> <div id="app" class="container"> <h1>{{ title }}</h1> <add-item @addItem="add"></add-item><br> <items :items="items"></items> <div class="footer"> <hr> <change-title :title="title" v-model="title"></change-title> </div> </div></template><script>import addItem from './components/addItem'import items from './components/items'import changeTitle from './components/changeTitle'export default { name: 'app', components: { addItem, items, changeTitle }, data() { return { items: [ {id: 1, text: 'Bananas', checked: true}, {id: 2, text: 'Apples', checked: false} ], title: 'My Items List' } }, methods: { add(text) { this.items.push({ text: text, checked: false }); } }}</script><style></style>

需要注意的是:每个组件必须只有一个根元素。我这里需要在public/index.html引入bootstrap样式和font-awesome图标字体。

运行程序:

cnpm run serve

最后附上运行截图:

在开发组件时,我们可能会期望一类组件放在同一个代码仓库下,就像element那样,我们可以使用element提供的脚手架,也可以使用vue cli 3创建一个更‘新'的项目。 项目创建 通过vue cli 3创建项目,创建文件夹packages用于存放组件。 单个组件目录 在packages下就是每一个组件,每个组件和单独项目一样,会有package.json、README.md、src、dist等文件及目录。 如何演示/调试组件 在组件开发过称中,我们需要对组件进行展示,所以创建了examples文件夹,用于存放每个组件示例。 通过一个列表展示出所有的组件,点击选择当前开发的组件,进入对应的example。 路由的根就是一个导航列表,然后每个组件对应一个路由,通过一个配置文件的components.js来生成这个路由。 // 路由 import Navigation from "./Navigation"; import components from "./components"; let routes = components.map(component => ({ path: `/${component.name}`, component: () => import(`../examples/${component.name}`) })); routes.unshift({ path: "", component: Navigation }); export default routes; 自动化脚本 创建/编译/发布 创建新的组件,需要修改components.js配置文件,在examples和packages下创建对应目录。 编译/发布组件,因为仓库下会有多个组件,如果一次发布多个,就需要进入每个文件夹下执行命令。 上面过程实现自动化,有很多种方式,比如可以通过npm run <script>,可以直接通过node命令等。这里我参考element,采用了Makefile。 创建script文件夹,其中包括创建脚本new.js和构建脚本build.js。 创建脚本 创建脚本主要就是目录的创建与文件的写入,其中可能需要注意的可能就是格式问题。 一种方式是在``之间,按照规范格式去完成写入内容,这样做比较麻烦,而且可能面临格式化要求修改问题。 另一种方式是在脚本中引入eslint,脚本中的eslint.CLIEngine可以根据配置文件(比如.eslintrc.js)格式化文件。需要注意的是需要比命令行中配置需要多添加fix: true配置, 如下 const CLIEngine = eslint.CLIEngine; const cli = new CLIEngine({ ...require("../.eslintrc.js"), fix: true }); eslint在脚本中的使用方法,更具体的可以参考eslint文档中Node.js API部分。 // scripts/new.js部分 ... components.push({ label: newName, name: newName }) const updateConfig = function(path, components) { writeFile(path, `module.exports = ${JSON.stringify(components)}`).then(() => { console.log("完成components.js") // 格式化 CLIEngine.outputFixes(cli.executeOnFiles([configPath])) }) } const createPackages = function(componentName) { try { const dir = path.resolve(__dirname, `../packages/${componentName}/`) // 创建文件夹 if (!fs.existsSync(dir)) { fs.mkdirSync(dir) console.log(`完成创建packages/${componentName}文件夹`) } // 写入README if (!fs.existsSync(`${dir}/README.md`)) { writeFile( `${dir}/README.md`, `## ${componentName} ### 使用说明 ` ).then(() => { console.log("完成创建README") }) } // 写入package.json if (!fs.existsSync(`${dir}/package.json`)) { writeFile( `${dir}/package.json`, `{ "name": "@hy/${componentName}", "version": "1.0.0", "description": "${componentName}", "main": "./dist/hy-${componentName}.umd.min.js", "keywords": [ "${componentName}", "vue" ], "author": "", "license": "ISC" } ` ).then(() => { console.log("完成创建package.json") }) } // 创建index.js if (!fs.existsSync(`${dir}/index.js`)) { writeFile(`${dir}/index.js`, `export {}`).then(() => { console.log("完成创建index.js") CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.js`])) }) } } catch (err) { console.error(err) } } const createExample = function(componentName) { try { const dir = path.resolve(__dirname, `../examples/${componentName}/`) // 创建文件夹 if (!fs.existsSync(dir)) { fs.mkdirSync(dir) console.log(`完成创建examples/${componentName}文件夹`) } // 写入index.vue if (!fs.existsSync(`${dir}/index.vue`)) { writeFile( `${dir}/index.vue`, `<template> </template> <script> import { } from '../../packages/${componentName}/index' export default { components: {} } </script> ` ).then(() => { console.log(`完成创建examples/${componentName}/index.vue文件`) // 格式化index.vue CLIEngine.outputFixes(cli.executeOnFiles([`${dir}/index.vue`])) }) } } catch (err) { console.error(err) } } ... 构建脚本 // build.js ... async function build() { for (let i = 0, len = components.length; i < len; i++) { const name = components[i].name await buildService.run( "build", { _: ["build", `${root}/packages/${name}/src/index.js`], target: "lib", name: `hy-${name}`, dest: `${root}/packages/${name}/dist`, // 生成格式: umd格式会同时成功demo.html commonjs,umd,umd-min formats: "commonjs,umd-min" // clean: false }, ["--target=all", `./packages/${name}/src/index.js`] ) } } ... Lerna lerna是一个多包仓库管理的工具,可以帮助创建、管理、发布多包仓库中的包。 关于lerna我也没有太深入得使用,只是用到了发布。首先在项目下执行init初始化了项目,在每次commit之后,可以执行publish。lerna会对应代码库打tag,并发布到npm仓库。 项目版本问题 0.0.1为不规范版本号,最小应该从1.0.0开始。npm publish无法发布,但是lerna publish可以发布。 导致结果安装为固定版本号,而不是以^开头的版本号范围。outdate可以检测到有更新,无法通过update升级。 组件开发 组件开发主要是在packages/<component name>/src目录下进行,在example/<component name>/目录下可以引入该组件src下的源文件,用一些数据来进行开发测试。组件开发和项目中的组件开发基本相同。 作为组件库中的组件,需要更多的考虑其通用性和易用性。不能为了通用而加入很多的属性,而使其失去易用性;同样也不能为了易用,而使其过于简单,使用范围过于局限。 对于每一个属性、每个抛出去的方法,都需要认真考虑其必要性。 唯一不同的地方可能需要注意的是导出的方式。 一种是直接导出组件,这种形式在使用时需要引入,并且在components中声明,也就是局部注册。 另一种是添加install方法后导出。这种形式需要调用vue.use方法,相当于全局注册。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。 您可能感兴趣的文章:Vue学习笔记进阶篇之多元素及多组件过渡内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解vue后台管理系统开发日常总结(组件pageheader)
  • vue开发拖拽进度条滑动组件
  • vue开发之封装上传文件组件与用法示例
  • 你不知道的vue技巧之--开发一个可以通过方法调用的组件(推荐)
  • vue递归组件+vuex开发树形组件tree--递归组件的简单实现
  • 详解mpvue中小程序自定义导航组件开发指南
  • vue组件大全包括(ui组件,开发框架,服务端,辅助工具,应用实例,demo示例)
  • vue组件开发之用户无限添加自定义填写表单的方法
  • 基于vue+axios+lrz.js微信端图片压缩上传方法
  • vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
  • vue 里面使用axios 和封装的示例代码
  • mockjs+vue页面直接展示数据的方法
  • 在vue项目中,使用axios跨域处理
  • vue-cli+webpack项目 修改项目名称的方法
  • vue.js 上传图片实例代码
  • vue 实现前端权限控制的示例代码
  • vue-cli3+typescript初体验小结
  • vue之watcher源码解析(1)
  • Vue多组件仓库开发与发布详解
  • vue.js中,在一个vue组件中,想通过点击按钮,才加载另外一个目标...
  • VUE实现日历组件功能
  • VUE + UEditor 单图片跨域上传功能的实现方法
  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例
  • 在vue2.0中引用element-ui组件库的方法
  • 浅谈Vue组件及组件的注册方法
  • vue.js开发环境安装教程
  • 从零到一详聊创建Vue工程及遇到的常见问题
  • 如何在js文件中获取vue组件对象的data方法中的属性
  • 探索Vue高阶组件的使用
  • vue2.0组件之间传值、通信的多种方式(干货)
  • 详解vue引入子组件方法
  • 基于vue-cli3多页面开发apicloud应用的教程详解第1/2页
  • Vue组件通信之Bus的具体使用
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库详解vue后台管理系统开发日常总结(组件pageheader)vue开发拖拽进度条滑动组件vue开发之封装上传文件组件与用法示例你不知道的vue技巧之--开发一个可以通过方法调用的组件(推荐)vue递归组件+vuex开发树形组件tree--递归组件的简单实现详解mpvue中小程序自定义导航组件开发指南vue组件大全包括(ui组件,开发框架,服务端,辅助工具,应用实例,demo示例)vue组件开发之用户无限添加自定义填写表单的方法基于vue+axios+lrz.js微信端图片压缩上传方法vue-auto-focus: 控制自动聚焦行为的 vue 指令方法vue 里面使用axios 和封装的示例代码mockjs+vue页面直接展示数据的方法在vue项目中,使用axios跨域处理vue-cli+webpack项目 修改项目名称的方法vue.js 上传图片实例代码vue 实现前端权限控制的示例代码vue-cli3+typescript初体验小结vue之watcher源码解析(1)vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(pr简单理解vue中props属性vue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue实现文件上传功能web前端vue之vuex单独一文件使用方式实例vue学习笔记之v-if和v-show的区别vue组件库发布到npm详解详解vue-cli构建项目反向代理配置vue 嵌套路由使用总结(推荐)element-ui自定义table表头、修改列标题样vue,angular,avalon这三种mvvm框架优缺点vue vantui tab切换时 list组件不触发loavue 动态组件与 v-once 指令的实现vue登录以及权限验证相关的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved