使用Vue构建搜索功能之（一）——创建Vue-cli工程

搜索在网站、软件以及系统都是一个重要的组成部分，大到整个网站的全站搜索，小到下拉框的快速检索都可能用到搜索功能，因此在模块化开发中，可以将搜索功能开发为一个公共组件，用于其他模块或者页面使用，甚至可以用于个人资源用于其他项目使用。

本教程为Vue组件开发的一些列教程，用于构建Vue的各种组件。本人也是刚刚开始学习Vue，如果有什么问题，还希望各位大神帮忙指正。

需要基础：本地安装node.js、npm。

1、 安装vue-cli；

Vue-cli是用于Vue.js的一个脚手架工具，能够快速创建、安装Vue工程，自动安装工程所需要的依赖模块，提高开发效率。

具体安装步骤如下：

（1） 新建一个文件夹作为项目工程文件，在项目文件内按住shift点击右键，单击“在此处打开命令窗口”

 

（2） 在命令窗口中输入：npm  install  Vue-cli，安装Vue-cli，然后等待安装：

 

安装完成以后，输入vue –V（大写），如果出现vue版本号，则说明vue-cli安装成功，如下图：

 

 

2、 构建Vue工程

安装完成了vue-cli脚手架工具以后，就可以开始构建vue工程了。

（1）创建工程命令如下：vue init webpack project（工程名称），然后会有一些系统对话框，都选择默认即可，一路回车（enter），如下图：

 

（2）创建完成了工程以后，使用命令npm install安装工程所有的依赖文件，完成以后，使用webstorm（我个人习惯）打开工程，工程目录，如下图：

 

其中的src为项目的主要文件内容（我们开发项目就在此文件内），static为静态文件资源。

（3）使用npm run dev启动工程，如下图：

 

在浏览器中输入127.0.0.1:8080，显示页面如下，则说明创建工程成功：

 

（4）如果npm run dev启动报错，有可能不支持localhost主机或端口被占用，可修改端口如下：

 

 

转载于:https://www.cnblogs.com/mr-Ou/p/8568360.html