Vue2+VueRouter2+webpack 构建项目总结

来源：互联网发布：warframe 淘宝队长包编辑：程序博客网时间：2024/04/27 14:56

摘要：本篇文章，是在学习了另一篇博客之后自己进行总结性的整合，一是因为原来的是教程博客是有5篇的，二来呢也是想要自己学完之后在巩固一下，本篇的所有代码我都是以截图的形式上传，不会在里面放上代码，这样让读者可以能够手打加深印象。

一.准备工作

首先，要开始工作之前，还是需要把环境搭建好。我这里的环境是windows，如果你是mac，请自己确保环境没有问题。

windows+nodejs+npm环境是必备的。另外需要文本编辑器，我使用的是sublime，当然，你可以使用其他的，都没有关系。只

是，nodejs是必须要安装的。

各个系统安装不一样，照着安装说明一步一步来就好了这里就不在阐述了，详情参考：nodejs 官方网站

安装好nodejs 之后，调出终端，快捷键为win+R键后输入cmd在按回车键就好，在终端下面输入命令node -v会有版本号出来。就说明安装成功了。输入npm -v也会有版本号出来，就说明，npm也已经安装好了。

因为npm在国内是会有点慢的，所以这里要讲npm改为国内的镜像(淘宝镜像居多)，具体的方法网上教程都有（淘宝镜像）

有了Nodejs环境，则我们可以开始了。

接下来进行vue-cli脚手架工具的安装，其模板可以通过 vuejs-templates 来查看。（有个前提，要稍微懂点DOS命令行的基本的命令，如cd，cls等）

（-g为表示全局安装，即不管你在哪个文件夹穿件都能表示已经安装引用到vue脚手架）

安装完vue-cli脚手架工具之后，开始正式创建项目了。进入自己要项目要创建的位置，我这里是在E盘就直接输入e:进入E盘。

进入自己项目要创建的目录后按照下面的命令逐条输入，新建自己的项目：

输入命令按回车键会后，会有一些提示，是什么不用管，按照下面我提供的进行操作即可

如上图所示，就说明我们的项目构建成功了。并且，给出了下面要执行的命令，我们来逐条执行：

执行npm install需要一点时间，因为有些会从国外服务器上下载代码之类的，所以这边直接一开始替换国内的镜像，用cnpm install代替进行节省时间。安装完成后，终端如图：

最后，执行下面一句，把项目跑起来

如上：四行命令，就可以把一个名为vuedemo的项目跑起来。当然，这个名字你是可以随便起的，根据你的实际项目来定。

通过上面的这些命令，我们就通过vue+webpack创建了一个名为vuedemo的项目。在运行了cnpm run dev之后，会自动打开一个浏览器窗口，可以看到具体的效果了。

二.目录以及文件结构

如上图所示，我们的目录结构就是这样的了。

目录/文件说明build这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。config配置目录，默认配置没有问题，所以我们也不用管node_modules这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的是，我们也不用管src我们的开发目录，基本上绝大多数工作都是在这里开展的static资源目录，我们可以把一些图片啊，字体啊，放在这里。test初始测试目录，没用，删除即可.xxxx文件这些是一些配置文件，包括语法配置，git配置等。基本不用管，放着就是了index.html首页入口文件，基本不用管，如果是开发移动端项目，可以在head区域加上你合适的meta头package.json项目配置文件。前期基本不用管，但是你可以找一下相关的资料，学习一下里面的各项配置。至少，要知道分别是干嘛的。初期就不管了。README.md不用管

如上，基本上就是这么个情况。重要的，还是src文件夹。src文件夹的情况如下所示：

commponents目录里面放了一个演示的组件文件，你可以打开看下。当然，也可以直接删除，然后根据我的博文往下走。

App.vue是项目入口文件。当然，我们需要改造，改造成我们可以使用的样子的。

main.js这是项目的核心文件。全局的配置都在这个文件里面配置。

接下来请照下文提供的src目录对src文件夹的文件进行整合，虽然你也可以用自己的但是这边博文是照着这个来的，所以你懂得：

如上图所示，把文件夹和文件都新建好，后面的博文我会详细给出每个文件的代码的。这里，都新建空文件即可。

文件\目录说明component组件文件夹我们写的一些公用的内容可以放在这里的。config核心配置文件夹frame存放自路由的文件夹page项目模板文件夹,所有的页面文件全部存放与此，后面会根据需要来建立各种子目录style样式存放目录

vue支持每一个模板里面写css，这样可以做到随用随取。但是，我个人不太喜欢这样，我还是喜欢把css给单独放出来，因为这样便于整理。

三.配置路由

src目录都已经整完了，现在开始先整2个页面练练手先，我们在src/page目录下面新建两个文件，分别是index.vue和content.vue。

我们还是利用 http://cnodejs.org/api 这里公开的api来做项目。不过本章节不涉及调用接口等内容。

//index.vue

//content.vue

接下来，我们需要安装VueRouter2到我们的项目。参考文档见VueRouter2安装文档

在终端中，我们把当前目录跳转到我们的项目，然后执行命令。如下：

我们查阅文档，会知道，命令是npm install vue-router（国内镜像为cnpm install vue-router），后面加一个-D的参数是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候，可以一并安装进去，否则，还得再安装一遍。

通过在终端中执行命令，我们已经安装好路由了。下面，我们需要在src/main.js文件中进行配置。