项目地址:https://pan.baidu.com/s/1c1Dflp2
使用前提:安装nodejs环境,webpack的配置官网的例子跟着跑一遍,会vue开发
研究webpack+vue研究了一个多星期了,走了很多坑,现在在下面写一下那些年的那些坑。
项目文件夹解释:compaent文件夹是通用的vue组件存放的地方,image文件夹是图片存放地址,professional文件夹是业务文件存放地址　　
搭建前必看:我们搭建前在网上找了很多的资料,觉得这篇是不错的对搭建WV环境有好处的:http://www.cnblogs.com/linfangshuhellowored/p/5657285.html
坑1：webpack+vue（以下简称WV）的项目结构
　　在使用WV框架之前,我使用的项目结构是普通的那种就是所有的css在一个文件夹 所有的js在一个文件夹 所有的图片在一个文件夹 所有的html在一个文件夹,在WV框架下我的结构是业务主导型 简单来说就是整个项目有一个base.css， 然后vue.js作为base.js，然后其他所有的页面通用型的vue组件合并文一个js文件叫做compaent,这三个文件是每一个html必须引用的 他们直接放在文件的根目录下,然后业务js,业务css,业务html放在同一个文件夹里面。
坑2：多入口
　　好像网上好多例子都是但入口,后来找到一些是实现多入口的,但是我们的html文件是几十个总不能一个一个写吧,所以找了一个方法,这个getEntry里面通过nodejs的path模块和glob模块匹配目录下所有的指定文件,这样就省事多了（如果听不懂我在说什么 这个说的比较好:http://www.cnblogs.com/legu/p/5741116.html）
坑3：css分离
　　使用es6的写法后,我们页面的css一般都是这种姿势引人用的 var detailsCSS = require('../app/details.css') ,这个时候如果直接打包的话 会把details.css直接打包到页面里,如果有用学想分离的话,可以使用extract-text-webpack-plugin插件,使用方式参考我的代码啊,
坑4：提取公共js
　　我们用vue和vue组件 肯定要在页面js里面引入这些js吧 如：import Vue from 'vue'，import detailbtn from './components/detailbtn'，&如果我们什么都不做直接就打包最后的结果就是每个业务js里面都会包含vue.js的源码 和vue组件的源码,这应该不是我们要的效果吧，我们要的是vue分离出来,vue组件分离出来，我们使用CommonsChunkPlugin插件：他的使用我可以参开这个：http://blog.csdn.net/github_/article/details/
坑5：版本号控制
　　清除缓存肯定要用版本号啊,我们分离了css肯定要在页面单独用link方式引入啊,分离了js肯定要script方式单独引入啊，可以使用这个插件:html-webpack-plugin 他的用法是生成html文件,主要是他可以参照模板来生成,而且还支持添加script方式引入js,想想一下：如果我们获取到我们所有的目录html 然后用这个插件对我们所有的html统一处理一下,批量引入分离的js文件 在引入的时候支持hash控制,参考:http://www.cnblogs.com/wonyun/p/6030090.html
坑6：图片资源打包
　　图片资源打包其实很简单,只是本身的打包不支持html里面引入的图片 ,这个时候我们用html-withimg-loader插件啊,（全局搜索我的webconfig文件 搜html-withimg-loader）需要安装url-loader插件和html-withimg-loader插件
大家有什么问题,写在评论里,我会回答的
阅读(...) 评论()他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
今天发完这一篇，就要这个系列告一段落了！以后如果有什么要补充的会继续补充！因为在后台管理项目上，搭建的话，主要就是这样了！还有的一些是具体到交互的处理，那个是要根据后端的需求，来进来比较细化的工作，我在这里就不说了！说了意义也不大，大家的项目的项目不一样的，细化的工作肯定是不一样的，然后开发的人不一样，对接的工作肯定也是不一样的！所以这个得靠小伙伴自己来处理和学习了！我写这文章的目的，希望起到的作用是授人以渔，而不是授人以鱼。好了，闲话不多说！今天要说的时利用监听路由的方式，实现同个页面不同状态的切换。具体怎样呢，看下面。
2.使用路由
2-1运用场景
大家看侧边栏的时候，有一个‘回款管理’和‘待确认回款’。大家都应该知道。这两个页面只是筛选的条件有一个不一样，其他都是一样的。所以没必要弄两个基本一模一样文件。所以还是公用一个文件比较好！但是如果是公用一个文件，那么在vue的生命周期那里，是不会重新渲染页面的。但根据项目的需求，在回款管理’和‘待确认回款’来回切换的时候，有很多数据是要更新的。但是‘回款管理’和‘待确认回款’是同一个文件，在这里来回切换，很多数据没法更新。所以这个时候，就要用到路由了！
2-2实现过程
2-2-1准备步骤
要实现‘待确认回款’回款也能和‘回款管理’那样切换，就必须要在router.js那里配置一下！
status是指一个参数，就是利用这个参数，让页面在‘回款管理’和‘待确认回款’这两个这里来回切换。同时，在cashList.vue的data那里也要初始化一个变量(pageStatus)。用来记录当前的时回款管理还是待确认回款！router.js配置好了之后，然后去到snav-component.vue。然后在url‘待确认回款’那里，找到menus设置下url，设置一个将要传给status的参数。
这里传的时0，也就是代表着，如果路由的参数上，如果status是等于0的话，就是‘待确认回款’页面，否则就是‘回款管理’页面。详细教程可以参考官网--
2-2-2监听路由
从这里开始，操作的页面都是cashList.vue了，小伙伴要注意哦！首先，使用路由，就要监听路由，我们使用监听。
//监听路由
handler: function (val, oldVal) {
//获取路由参数
let _urlParams = this.$route.
//先清空搜索字段（this.keyFrom）所有属性的值
for (let key in this.keyFrom) {
this.keyFrom[key] = null
//如果路由参数存在，并且参数含有status。
if (_urlParams && _urlParams.status) {
//就把回款状态keyFrom.cashStatus成‘待确认回款’状态！
this.keyFrom.cashStatus = _urlParams.
//pageStatus小伙伴自己在data定义哦，记录当前状态！
this.pageStatus = _urlParams.
//添加标签
this.addTags();
//更新数组cashList
this.getList();
//深度观察监听
deep: true
$route.params就是路由的参数，大家要注意理解哦！
2-2-3页面处理
监听完路由就处理一下，页面上了，有什么处理呢，大家分析下。1.‘待确认回款’页面中，回款状态这个下拉框，是固定的，不定改的，在页面上，就要禁用
这个很简单，只要绑定disabled属性就可以了，后面的判断就是，只要pageStatus等于0就绑定，路由的参数是字符串的'0',大家也可以pageStatus==0。只要pageStatus等于0，那么页面就是‘待确认回款页面’
2.进入‘待确认回款’页面中，回款状态的筛选标签要加上。
这个就是在监听路由的时候已经做了，数组也更新了。
3.‘待确认回款’页面中，重置搜索的时候，其它条件清除，回款状态依然存在。这个其实和监听路由一样的道理，也是一样的做法
resetSearch(){
//先清空搜索字段keyFrom
for (let key in this.keyFrom) {
this.keyFrom[key] = null
//如果是待确认回款页面，就设置回款状态keyFrom.cashStatus=0
if (this.pageStatus === "0") {
this.keyFrom.cashStatus = '0';
//添加标签和更新数组
this.addTags();
this.getList();
4.页面标题的改变！
这个就真的太简单了。根据pageStatus判断就好。
利用路由做的一些小操作，今天就说到这里了！大家也可以想一下，如果不用路由，这个可以怎么实现。路由这里用的也是比较基础的用法。小伙伴可以自行研究下，另外项目上，这些一系列文章，说的也是很大体的一些东西，开发细节上的一些处理，这个要看项目需求，看对接的人等，在这里无法一一说明，得靠小伙伴们自己随机应变的处理。我写这一系列文章，希望起到的作用的是授人以渔，不是授人以鱼。希望能对大家有所帮助。到这里，项目实战就到这里高一段落了，但是文章不能停，以后有什么觉得可以分享的，开发了什么有趣的玩意，我会在第一时间分享。让大家一起交流下，一起学习下。最后，还是那句话，有什么写的不好，或者写错了的，欢迎指正，让大家相互学习下，相互帮助下。
4.往期回顾
6 收藏&&|&&19
你可能感兴趣的文章
47 收藏，797
105 收藏，6.7k
151 收藏，4.3k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。使用vue+webpack的多页面框子介绍
使用vue+webpack的多页面框子介绍，首先，要大概知道webpack是什么，webpack的插件都是做什么用的，vue是什么，然后看完之后也可以去补充一下这些方面的知识。
第一步：安装环境
需要安装的有：
nodejs，并添加入环境变量PATH 使用nodejs安装vue-cli
参考内容：
https://cn.vuejs.org/guide/installation.html#u547D_u4EE4_u884C_u5DE5_u5177
使用命令：
npm install -g vue-cli
使用nodejs安装webpack和webpack-dev-server
参考内容：
https://webpack.github.io/docs/tutorials/getting-started/
使用命令：
npm install webpack -g
之所以要在全局安装webpack是因为使用webpack的命令行方便，不需要在每一个项目中到node_module中调用。 Atom编辑器
这个从网上下载，https://atom.io/。这是一个开源的编辑器软件，之所以选择atom，是因为它集合了sublimeText和其他一些编辑器的优点。最大的好处是可以使用package插件的形式对atom编辑器进行自定义扩展。
第二步：创建项目模板
vue init wepack vue-multipage-demo
如上所示，这条命令的意思是使用vue的init命令，创建一个基于webpack化管理的项目。这将会在D:\WS_WebStorm目录下创建新目录vue-multipage-demo。
如图2，在经过设置之后，可以看到已经生成了一个项目vue-multipage-demo，接下来需要切换到项目目录下进行操作。在资源管理器中，我们可以看到已经生成了这样的目录：
如图3，各个文件夹和文件分别是：
build webpack构建过程的设置文件，包括调试和发布版本以及一些工具函数
config 这里是webpack-dev-server的一些设定，关于webpack和webpack-dev-server的设定，详见官方文档
src 项目的源文件所在，按照你需要的样子写js和html文件，webpack将打包成可识别的，如ES6
static 这里是存放静态资源的地方，在build之后会生成dist文件夹，这个文件夹中的文件会原封不动放进去
.babelrc webpack插件babel的设置
.editorconfig 这是atom编辑器生成的配置文件，在各个项目中可以自由配置
.eslintignore 使用eslint检测代码是否符合规则的忽略目录，用于eslint设置
.gitignore 使用git版本管理时需要忽略的目录，用于git设置
index.html 项目生成后的入口页面，因为vue默认是使用单页面的，所以在webpack中同时也只有这一个入口
package.json nodejs的配置
README.md 说明文件，其中说明了使用vue-cli创建项目之后应该怎么做
dist build之后生成的目录，其中存放webpack打包之后的结果，webpack中需要指定build规则
如图4，执行这两条命令，切换到项目目录下，使用npm的安装命令，对已经生成的package.json所依赖的组件进行安装。当然，我们之后还会安装一些其他的插件。
第三步：补充需要的插件
虽然说，在项目开发中，插件的补充是根据需求进行增减的，但是在这个项目中，有一些基本的需要添加的插件，我在这里提出。package.json中的代码如下：
&dependencies&: {
&babel-runtime&: &^6.0.0&,
&bootstrap&: &^3.3.7&,
&bootstrap-table&: &^1.11.0&,
&font-awesome&: &^4.6.3&,
&jquery&: &^3.1.0&,
&node-glob&: &^1.2.0&,
&vue&: &^1.0.21&,
&vue-resource&: &^0.9.3&
&devDependencies&: {
&babel-core&: &^6.0.0&,
&babel-eslint&: &^6.1.2&,
&babel-loader&: &^6.0.0&,
&babel-plugin-transform-runtime&: &^6.0.0&,
&babel-preset-es2015&: &^6.0.0&,
&babel-preset-stage-2&: &^6.0.0&,
&babel-register&: &^6.0.0&,
&bootstrap-loader&: &^2.0.0-beta.9&,
&connect-history-api-fallback&: &^1.1.0&,
&css-loader&: &^0.23.0&,
&dynamics.js&: &^1.1.5&,
&eslint&: &^2.10.2&,
&eslint-config-standard&: &^5.1.0&,
&eslint-friendly-formatter&: &^2.0.5&,
&eslint-loader&: &^1.3.0&,
&eslint-plugin-html&: &^1.3.0&,
&eslint-plugin-promise&: &^1.0.8&,
&eslint-plugin-standard&: &^1.3.2&,
&eventsource-polyfill&: &^0.9.6&,
&express&: &^4.13.3&,
&extract-text-webpack-plugin&: &^1.0.1&,
&file-loader&: &^0.8.4&,
&function-bind&: &^1.0.2&,
&html-webpack-plugin&: &^2.8.1&,
&http-proxy-middleware&: &^0.12.0&,
&json-loader&: &^0.5.4&,
&ora&: &^0.2.0&,
&shelljs&: &^0.6.0&,
&url-loader&: &^0.5.7&,
&vue-hot-reload-api&: &^1.2.0&,
&vue-html-loader&: &^1.0.0&,
&vue-loader&: &^8.3.0&,
&vue-style-loader&: &^1.0.0&,
&webpack&: &^1.13.2&,
&webpack-dev-middleware&: &^1.4.0&,
&webpack-hot-middleware&: &^2.6.0&,
&webpack-merge&: &^0.8.3&
其中包括了由项目自动生成的一些插件。
我梳理一下，主要有下面这些，其中标注红色的是我自己用来开发依赖的：
dependencies:
babel-runtime
bootstrap-table
font-awesome
devDependencies:
bootstrap-loader
dynamics.js
那么主要就是添加一下node-glob和vue，其他的如果需要再进行添加。nodej-glob是用来获取路径的，vue是需要依赖的主要部分。
第四步：修改项目
这一步最重要。
在我们没有动过之前，src目录是这个样子的，如图5：
首先，创建如下目录结构：
&&index.html
将之前外面的index.html放进来，main.js放入index，改名为index.js，此处一定注意名称要相同，否则后面寻找路径时是找不到对应文件的。然后将App.vue放入components。最后是这样的，如图6：
这时候需要对文件进行一定的修改。首先是index.js，对App的调用，路径修改，如图7
修改完了上面的资源，我们要修改webpack的配置。
我们介绍一下webpack在这个项目中原本的顺序：由于webpack将所有的js，css/less，html等都视为js的可引入资源，所以入口就成了js文件。那么webpack需要设置一个入口的js文件，这个入口的js文件就是main.js，在webpack中有一个插件，叫做html-webpack-plugin，这个是用来将js和html对应起来，也就是若干js对应一个html，在原来的项目中html就是index.html。
在运行npm run dev 或者build之后，就会将文件打包，由于dev的时候文件是在内存中，所以build可以看得比较清楚，在dist目录中，会有一个index.html，其中已经打包进了
webpack.base.conf
添加下面两行在这里，图8中位置，
var glob = require('glob');
var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
这里的glob，就是前面提到的node-glob。将entry修改为这个，图9中位置，
然后在下面添加getEntry方法。
function getEntry(globPath) {
var entries = {},
basename, tmp,
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + // 正确输出js和html的路径
entries[pathname] =
console.log(&base-entrys:&);
console.log(entries);
因为我们的想法是要将所有的业务模块放在module中，这样一来的话，就在module中细分，最后输出html都在dist的module下。这里的字符串操作也是和路径的情况相匹配的，如果有需要进行其他方式的设定，注意在这里修改路径的识别。
webpack.dev.conf.js
在打开后，我们会发现在这里有一个插件的设置，如图10：
这个 插件就是刚才提到的将输出html页面build结果的地方。
首先，添加
var path = require('path');
var glob = require('glob');
用来引入path和glob工具。
将图10中的那一段去掉，因为我们要自己来添加这个插件。
同样的，在这个文件中也需要添加这个函数，放在文件的下面，
function getEntry(globPath) {
var entries = {},
basename, tmp,
glob.sync(globPath).forEach(function(entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(0, 1) + '/' + // 正确输出js和html的路径
entries[pathname] =
console.log(&dev-entrys:&);
console.log(entries);
然后再添加这一段，
var pages = getEntry('./src/module/**/*.html');
console.log(&dev pages----------------------&);
for (var pathname in pages) {
console.log(&filename:& + pathname + '.html');
console.log(&template:& + pages[pathname]);
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
minify: { //传递 html-minifier 选项给 minify 输出
removeComments: true
inject: 'body', // js插入位置
chunks: [pathname, &vendor&, &manifest&] // 每个html引用的js模块，也可以在这里加上vendor等公用模块
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
这个同样是通过指定的路径，按照我之前的预想，进行html的迭代获取，然后对每一个html进行设定。我们的多页面输出关键也就在这个地方。
html-webpack-plugin这个插件可以为一个html输出打包对应的js模块。chunks就是对应的js模块，也就是webpack的入口，包括entries和使用了webpack.optimize.CommonsChunkPlugin插件声称的公共js模块。这些模块都有各自的名字，entries的名字就是前面通过getEntry函数生成的一组入口组件名称和路径。
通过上面的修改，就做成了这样一件事情：为webpack提供多个js入口，而这些js入口和html页面是在同一个文件夹下的，那么它们的key或者说name就是相同的。这样在循环的时候，就会获取到对应的js和html，通过循环创建多个html-webpack-plugin来将不同的js模块打包进对应的html，并通过webpack批量构建，在dist中就会产生我们需要的一组html文件。而这些html文件都是已经经过压缩的，js代码也经过了压缩处理。
webpack.prod.conf.js
和webpack.dev.conf.js中做类似的处理，先注释掉原来的HtmlWebpackPlugin，然后在下面添加函数，通过迭代插入多个HtmlWebpackPlugin。
HtmlWebpackPlugin更多的设置，到webpack的官网上查看。
然后使用npm run dev或者npm run build来构建。在构建的过程中，可能会出现一些依赖插件不存在的错误，需要先使用npm install &save-dev 插件名 来安装相应的依赖插件。
这样，index.html就被构建到了dist/module/index.html中。
但功能是一模一样的。
vue的使用在这里不赘述。这里说明一下，我们的module中，是的业务模块，components中是功能模块和细分的代码模块，也就是vue组件。由于webpack这里带了babel，所以在js源文件中可以使用ES6的写法。在业务js中，就可以通过导入，组合，自定义vue组件，来实现相应的业务需求。
比如在我现在拆分的这个网页中，包括这么几个部分：
这是对一个bootstrap网站模板index页面进行拆分后的结果，css，html都放在对应的vue中，当然，我也引入了jquery。
vue的组件可以实现继承和mixin。能够很好的进行组件化开发，而通过webpack将src的源代码进行构建变成浏览器能够识别的正常文件。这样就大大降低了的重复性。30960人阅读
vuejs（34）
Vue2+VueRouter2+webpack 构建项目实战（三）配置路由，整俩页面先
2017年8月补充
2016年，我写了一系列的 VUE 入门教程，当时写这一系列博文的时候，我也只是一个菜鸟，甚至在写的过程中关闭了代码审查，否则通不过校验。
本来写这一系列的博文只是为了给自己看的，但没想到的是，这系列博文的点击量超过了2万以上，搜索引擎的排名也是非常理想，这让我诚惶诚恐，生怕我写的博文有所纰漏，误人子弟。
再者，这一年的发展，VUE 项目快速迭代，看着我一年前写的博文，很可能各种提示已经发生改变，对照着过时的资料，非常可能导致新手在学习的过程中产生不必要的困扰。
因此，本人决定，重写这个系列的博文，力求以简明、清晰、准确的图文以及代码描述，配合 github 的项目开源代码，给各位 VUE 新手提供一个高质量的入门文案。
以下为我写的博文：
以下为原文
制作模板文件
通过前面的两篇博文的学习，我们已经建立好了一个项目。问题是，我们还没有开始制作页面。下面，我们要来做页面了。
我们还是利用
这里公开的api来做项目。不过本章节不涉及调用接口等内容。这里，我们假设我们的项目是做俩页面，一个列表页面，一个内容页面。列表页面有分页等，内容页面展示。
因此，我们需要两个模板文件。
我们在src/page目录下面新建两个文件，分别是index.vue和content.vue
代码分别是
&template&
//content.vue
这里，我们只要先把基础的内容写好就是了。我就用两个单词代表我们的页面。
安装VueRouter2
接下来，我们需要安装VueRouter2到我们的项目。参考文档见
在终端中，我们把当前目录跳转到我们的项目，然后执行npm install vue-router -D命令。如下：
cd ~/Sites/MyWork/vuedemo
npm install vue-router -D
我们查阅文档，会知道，命令是npm install vue-router，那为什么我后面加一个-D的参数呢？这个是为了让我们的安装的vue-router这个插件写入到package.json配置文件中。以便于下次再其他地方安装的时候，可以一并安装进去，否则，还得再安装一遍。
配置 main.js
通过在终端中执行命令，我们已经安装好路由了。下面，我们需要在src/main.js文件中进行配置。
整理代码如下：
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routes from './config/routes'
Vue.use(VueRouter)
const router = new VueRouter({
el: '#app',
render: (h) =& h(App)
上面的配置文件中的一部分在官方文档里面也找不到，这是我整理出来的，不用管，全部复制过去吧！
配置 App.vue
入口文件肯定和默认的不一样，我的配置文件如下：
&template&
class="view"
keep-alive
transition
transition-mode="out-in"&
export default {
components: {}
lang="scss"&
@import "./style/style";
就只是一个单纯的路由入口页面。比较特殊的是，下面我 import了一个scss文件。我喜欢把css独立出来，而不是写在一起，所以我之前在src目录下面建立了一个style的文件，里面放scss文件。
我建议你先跟着我走，回头自己根据自己的习惯调整。
配置 routes.js
下面我们配置路由文件。
import index from '../page/index.vue'
import content from '../page/content.vue'
export default [
path: '/',
component: index
path: '/content',
component: content
如上，我们引用模板，然后再配置路由，这里，我们没有涉及自路由的内容，我们先这样配置上。然后，我们就可以在终端里面输入 npm run dev 来看我们做的效果了。
配置运行端口
如果没有跑起来，提示下面的错误，就表明默认的端口8080被占用了。一般不会被占用，但是也有可能被占用。所以，我们这边来学习一下如何配置运行端口。
# 端口被占用的提示
.exports._errnoException (.js:953:11)
._exceptionWithHostPort (.js:976:20)
._listen2 (.js:1253:14)
打开项目根目录下/config/index.js配置文件，找到
env: require('./dev.env'),
port: 8080,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
cssSourceMap: false
如上，把 port 后面的端口改成其他数字，如9000 即可。
关闭格式检查插件eslint
如上，我们再次运行 npm run dev 跑起来，结果发现命令行里面错误一片。。。很多人在这里就都晕了。。。没关系，其中大部分错误都是格式造成的，并不是很重要的错误，但是这样的提示很不爽。因此，我们把检查错误插件eslint给关闭掉。
打开根目录下面的/build/webpack.base.conf.js文件，找到如下代码：
preLoaders: [
test: /\.vue$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
test: /\.js$/,
loader: 'eslint',
include: projectRoot,
exclude: /node_modules/
全部注释掉，如下
回头，调整格式的时候可以再打开。先关掉，解决核心错误，再来考虑这些格式错误。
安装sass-loader以及node-sass插件
然后我们再跑，这回错误肯定少多了，但是还是有错误。如果你上面是严格按照我的代码来的，这里应该会提示缺少sass-loader组件错误。
没关系，缺什么，就安装什么，我们输入 npm install sass-loader -D进行安装。
如上图所示，就安装好了。
安装好了再跑，这回又提示我们缺少node-sass插件。折磨疯了吧？没关系，缺啥，安啥。
输入命令npm install node-sass -D进行安装。
安装结果不截图，然后，我们运行npm run dev，如果不出意外的话，应该能够顺利的跑起来了。
我们在地址栏后面输入http://localhost:9000/#/content应该就能访问到我们配置的内容页面的模板了，如下图所示：
好，通过本章的学习，我们已经顺利的安装好路由，并简单的配置了两个页面，并且顺利的跑起来了。
可能是我写的代码不太标准，因此在跑起来的时候不能通过校验，必须把校验关闭掉才能跑起来。如果你知道我的代码有什么问题，欢迎留言给我，让我修复我的问题。
通过本章学习，我们需要掌握如下技能：
简单配置main.js文件。
简单安装组件，以及相应的配置。
遇到错误提示的时候，不要着急，一步一步排查，最终解决问题。
我的博文和官方文档最大的差别就是，我是一步一步走，并不是简单给你几个命令就好了。在这过程中，我们要学会排查问题，解决问题。要多看官方文档。
本文由FungLeo原创，允许转载，但转载必须附带首发链接。如果你不带链接，我将采取包括但不限于深深的鄙视你等手段！
首发地址：
文章：178篇
阅读：1127707
文章：23篇
阅读：93166
文章：39篇
阅读：151540
文章：20篇
阅读：199884
文章：18篇
阅读：23983
文章：14篇
阅读：8093