vue项目构建与实战实例教程

由于vue相对来说比较平缓的学习过程和新颖的技术思路，使其受到了广大前后端开发者的青睐，同时其通俗易懂的API和数据绑定的功能也为其揽获了不少用户。本文主要讲解vue项目的构建与实战，因此不会太多涉及其API和语法部分，旨在帮助vue的入门级用户了解从零开始构建vue项目的步骤和方法。

首先，在构建一个vue项目之前我们需要了解vue项目的分类，这里我主要将其分为两类：（1）直接引入vue.js文件 （2）使用vue单文件组件

按以上两类来看，直接引入vue.js文件就像页面中直接引入jQuery一样，这样的项目存在很多缺陷，只能使用一些基础的API和局限的功能，一般主要用于初级用户和小型项目。本文主要讲解第二种使用vue但文件组件构建的vue项目。

构建一个vue项目存在着多种方式，首先我们需要用到相应的构建工具。官方推荐的构建工具主要有webpack和browserify，这里我更推荐大家使用webpack进行构建。同时除了构建工具，我们还需要用到构建方法，比如我们可以使用vue-cli脚手架来自动生成vue项目的基础目录文件，当然我们也可以从零开始进行自定义构建。

vue-cli构建

如果你使用vue-cli脚手架来构建vue项目，那么你只需敲击下面5行命令即可生成一个简单的vue项目（前提安装node.js）：

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

这样的构建方式其实并不适用于所有项目，很多文件你的项目可能都不会用到，并且如果你对自动生成的文件一无所知，那么后期维护起来也会非常的吃力。所以这里不推荐新手使用vue-cli构建，而是推荐大家参考vue-cli生成的文件从零开始构建一个vue项目。

自定义构建

相比vue-cli构建，自定义构建就显得灵活得多，但是它需要你了解构建的步骤和原理，要求也就随之提高了。自定义构建分为以下几步：

文件/文件夹创建

package.json文件创建

webpack配置文件创建

入口文件创建

vue组件编写

路由配置

package.json文件

使用下方命令，我们可以快速创建一个package.json文件：

npm init -y

然后修改其scripts配置项，添加打包压缩命令，并且增加dependencies依赖项，添加项目相应依赖。

webpack配置文件

其次我们需要创建我们的webpack配置文件，这里和构建其他项目不同的是，vue单文件组件需要使用vue-loader加载器进行加载，同时使用babel-loader进行ES6语法的转换

入口文件

这里我们需要编写在webpack中配置的入口文件地址的entry.js，主要功能为挂载生成的vue实例app至id为app的DOM节点上

然后我们需要编写一个最简单的vue组件index.vue，将其放在views文件夹下

本文主要介绍了vue项目构建的两种方式，vue-cli构建与自定义构建都有其适用的范围和对象，大家需要针对项目和自身条件的情况进行择优选择，同时在自定义构建中也有很多功能配置本文并未提及，感兴趣的童鞋可以自己继续探索。

以上就是vue项目构建与实战实例教程的详细内容，更多请关注php中文网其它相关文章！