自从node的兴起，前端项目中就开始出现各种预处理工具，当我们开始一个新项目时，我们都会先编写一些预处理文件，和构建项目目录。
而vue-cli就是为了做这方面工作的，生成一套提前定义好的构建文件，和相应的文件。
vue-cli有5个对应的项目结构。我们使用的是vue-webpack-boilerplate。
$ npm install -g vue-cli$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev
执行上面命令后，我们将生成下面的文件结构，并开一个服务，你可以打开http://localhost:8080看看。
具体的使用建议看文档。
项目结构
如果你之前就了解vue和vue-router，可以先看这部分。如果你了解vue不了解vue-router,可以先看这篇文章vue-router。如果你连vue都不是很理解我建议，抽5个小时左右把文档教程过一遍。
你可以看到项目根目录下面有一个html，仅有的一个html。
上图的结构是我自己琢磨的，主要是结合vue-router、vuex两使用方法来考虑的。另外对于组件的复用，将一些功能组件和全局组件都放在根部，通过vuex来控制组件属性实现一些功能。
下面我就结构由上至下的介绍。
main.js
main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件。
import Vue from 'vue'import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import filter from './filter'
import store from './vuex/store'
import { sync } from 'vuex-router-sync'
import { configRouter } from './config_router'
import resourceGlobalSet from './resource_set'
Vue.use(VueResource)
Vue.use(VueRouter)
// 初始化自定义过滤器
Vue.use(filter)
const router = new VueRouter({
history: true,
saveScrollPosition: true
})
configRouter(router)
Vue.http.options.emulateJSON = true
Vue.http.interceptors.push(resourceGlobalSet) // ajax 拦截
sync(store, router)
router.start(App, 'app')
就如同上面所示，主要是使用和配置相应插件，并初始化一个vue，上面的初始化在router.start(App, 'app')，是以App.vue为组要组件，并以html中的为挂载替换点。
APP.vue
App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
下面是App.vue的template
<template><div id="app">
<cn-header></cn-header>
<sidebar></sidebar>
<router-view></router-view>
<tip></tip>
<loading></loading>
</div>
</template>
你可以看到route-view和其它全局功能组件，全局组件在一个层级。
另外由于APP.vue在所有页面都有，我们将会在APP.vue上面写一些初始化全局方法。
router
router 是具体的业务组件，比如index,login,content等组件都是具体业务相关的。下面就是再和业务相关的组件。
全局组件
全局组件是页面共用的部分，比如header，footer，navbar，你可能在想如果我有一些header是独特的怎么办，这种情况下可以通过路由做判断，渲染不同的html，如果判断条件不是路由，也可以在vuex写一个store记录组件的state。
功能组件
功能组件是比如dialog,tip等组件，使用来与用户交互的。
通常情况下，功能组件是各个组件都需要的一些组件。在一个页面里如果有两个组件，两个组件都同时引了一个tip组件作为子组件是纯在的。为了避免这种情况，我们将功能组件提到App.vue然后通过vuex进行组件交互，从而就讲一个功能组件变成了全局方法。
自定义插件
vue还能自己写插件。对于一些公用的方法和逻辑，我们可以提出来写在插件里面。
基于element-ui组件
开发的vue.js项目，
实现回车键发起搜索，和原生的input
标签使用方法不一样：
el-input
监听键盘按下状态
得用@keyup.enter.native,如果是非el-input
组件，可以直接用@keyup.enter
<el-input
placeholder="搜索"
icon="search"
v-model="input"
:on-icon-click="pchandleIconClick"
@keyup.enter.native="searchEnterFun">
</el-input>
<input
placeholder="搜索"
type="text"
@keyup.enter="searchEnterFun">
在methods方法集里，写上监听的方法，当获取的keyCode
为13时，表示按下了回车键，如果需要监听空格或者其他键，换成别的键值
searchEnterFun:function(e){
var
keyCode
=
window.event?
e.keyCode:e.which
//
console.log('回车搜索',keyCode,e)
if(keyCode
==
13
&&
this.input){
this.$router.push({path:'/Share?keywords='+this.input})
}
}
which
和
keyCode
属性提供了解决浏览器的兼容性的方法。
keyCode属性返回onkeypress事件触发的键的值的字符代码，或者
onkeydown
或
onkeyup
事件的键的代码
注意：
在
Firefox
中，keyCode
属性在
onkeypress
事件中是无效的
(返回
0)。浏览器兼容问题，可以一起使用
which
和
keyCode
属性来解决：
var
keyCode
=
window.event
?
e.keyCode:e.which
which
属性返回onkeypress事件触发的键的值的字符代码，或者
onkeydown
或
onkeyup
事件的键的代码
浏览器支持：谷歌、火狐、ie9、safari、欧朋
以上这篇vue.js项目
el-input
组件
监听回车键实现搜索功能示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:详解.vue文件中监听input输入事件（oninput）vue使用element-ui的el-input监听不了回车事件的解决方法vue点击input弹出带搜索键盘并监听该元素的方法
