所谓的vue-cli简单项配置是不含有router的，虽然涉及到了单页面组件，但是router还是需要自己来配置，当把vue-router组合起来才更为完整。

温馨提示：本文只是小鸟自行组装。

整体步骤分为以下几部：

step 1：电脑安装cli

step 2：npm下载vue-router

step 3：配置router

step4：router-view 和 router-link

step5：另外教学

那么，就让我们开始一步一步来吧!!!

---

一、安装cli

(一)安装node、npm

       怎么安装这个需要你自己查，当你在cmd里输入node -v & npm -v 可以返回版本号说明你已经成功安装。

（二）安装cli

找到你想要放入项目的文件夹，git bash here  ---不知道你会不会git

打开cmd也好，cd到你的文件夹，按序输入以下命令 

1. npm install vue-cli -g

2.vue init my-project webpack-simple   （看这里，my-project 是你的项目文件夹名，webpack-simple是简版webpack配置）

-----ps.这里输入之后会提示你很多什么name ，description啊 直接回车或者输入你的。

3.npm run dev      （运行安装好的vue-cli项目）

（三）配置router

欧尤，正题来了。。

vue-router还需要你在terminal安装vue-router的包，所以terminal还是要打一行命令  ： npm install vue-router --save-dev

安装完成之后文件夹是这样式儿的。

目录结构

可以看到其实文件夹东西还不错，内里文件比较少。接下来需要你在src这个文件夹里面创建组件（components）文件夹，router文件夹，像我这样

文件夹目录

（三）  router配置

俩文件夹创建好了之后呢，我们需要在router里面创建index.js。当然这个js名叫啥其实并没有什么关系

具体代码需要你改成这样。

index.js

当然，配置好router的config之后呢，我们需要应用到主项里面。那么我们需要改动下main.js

main.js

import router form './router/index.js'

new Vue里面加入router项

（四）router-link 和 router-view  单页面组件创建 添加

下面，App里面也要做相应修改 加入router-view 如果需要导航式的link的话我们需要加入router-link，而我这边把导航作为组件单独写

Router.vue

App.vue 具体写法:

1、script里import RouteComponent，export加入components：RouteComponent。

2、template里加入<route-component></route-component>   

App.vue

这样我们就做好了简单的修改。我们可以npm run dev来试一下。

（五）其他部分

1.jquery、bootstrap集成

很多时候开发者需要在vue里面使用jquery和bootstrap来做页面开发，那么如何在这个项目里面实现全局的$使用是一个问题。

webpack里有一个providerPlugin组件，用来管理依赖，那么我们需要在webpack.config.js里添加该插件创建全局，当然在这之前你需要先安装npm install jquery bootstrap --save-dev

安装好了之后我们需要配置一下webpack.config.js这个打包工具。

webpack.config.js

Ps：在webpack.config.js里面有一个坑，node开发者当然会避开该项问题，小白就容易被搞。具体看图

process.env.NODE_ENV

这个process.env.NODE_ENV==production代表生产环境，这里会填入了很多插件内容，当我们provideplugin需要配置的话，开发环境生产环境都是需要配置的。所以两边都要写。我的配置里面是有bootstrap4的，所以配置会很多。

2.当你init的时候选择scss文件编译，但是又需要css引入的话

你需要一个style-loader  ：npm install style-loader --save-dev  然后做以下配置

.css文件loder

3.scss支持

npm install node-sass sass-loader postcss-loader --save-dev

scss-loader配置

好就酱紫，好像很多的东西，最后其实就是瞎整着玩儿了。

页面显示

git：https://github.com/wulibaibao/simple-demo

欢迎踩踏。里面暂时还没多少东西。