所谓的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名叫啥其实并没有什么关系
具体代码需要你改成这样。
当然,配置好router的config之后呢,我们需要应用到主项里面。那么我们需要改动下main.js
import router form './router/index.js'
new Vue里面加入router项
(四)router-link 和 router-view 单页面组件创建 添加
下面,App里面也要做相应修改 加入router-view 如果需要导航式的link的话我们需要加入router-link,而我这边把导航作为组件单独写
App.vue 具体写法:
1、script里import RouteComponent,export加入components:RouteComponent。
2、template里加入<route-component></route-component>
这样我们就做好了简单的修改。我们可以npm run dev来试一下。
(五)其他部分
1.jquery、bootstrap集成
很多时候开发者需要在vue里面使用jquery和bootstrap来做页面开发,那么如何在这个项目里面实现全局的$使用是一个问题。
webpack里有一个providerPlugin组件,用来管理依赖,那么我们需要在webpack.config.js里添加该插件创建全局,当然在这之前你需要先安装npm install jquery bootstrap --save-dev
安装好了之后我们需要配置一下webpack.config.js这个打包工具。
Ps:在webpack.config.js里面有一个坑,node开发者当然会避开该项问题,小白就容易被搞。具体看图
这个process.env.NODE_ENV==production代表生产环境,这里会填入了很多插件内容,当我们provideplugin需要配置的话,开发环境生产环境都是需要配置的。所以两边都要写。我的配置里面是有bootstrap4的,所以配置会很多。
2.当你init的时候选择scss文件编译,但是又需要css引入的话
你需要一个style-loader :npm install style-loader --save-dev 然后做以下配置
3.scss支持
npm install node-sass sass-loader postcss-loader --save-dev
好就酱紫,好像很多的东西,最后其实就是瞎整着玩儿了。
git:https://github.com/wulibaibao/simple-demo
欢迎踩踏。里面暂时还没多少东西。