()下载vue-cli2之后 (仅做个人笔记,因为是新手,肯定很多理解错误的地方,望指正;)
第一步
先安装路由(npm install vue-router --save)
*注意 安装后面的 --save 其实有两种模式 ( --save 和 --save-dev )
--save：将保存配置信息到pacjage.json。默认为dependencies节点中。
--save-dev：将保存配置信息devDependencies节点中;
dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块 (我的理解就是打包之后还需要的,像axios,router)
devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。(我的理解就是开发时需要,但是等到打包之后就不需要的,例如css-loader,vue-loader;转化插件);
加 --save安装过程中会特别慢,且出现报错,暂时没有去关注为什么会报错,查看官方文档显示可以省略后面的模式直接 npm install vue-router
结果发现也报错,且没有安装成功;最开始我以为vue-router安装有问题,赋值报错信息看了一下,大概说是路径什么的,然后我把下载好的vue-cli2换了另外一个路径;npm install vue-router ;安装成功;
安装成功之后简单来看看如何使用
在入口文件main.js里面 import VueRouter from 'vue-router'
Vue.use(VueRouter) 用Vue.use();方法 明确地安装路由功能;
但是往往我们是需要把路由router单独放在一个文件里面,然后导出在main.js引入;这样方便查看
新建一个router文件夹,然后在里面新建index.js文件来承载我们的路由逻辑;
router->index.js包含如下引入
import Vue from 'vue'
import Router from 'vue-router'
// 引入vue和vue-router并赋值给相应的Vue和Router
Vue.use(Router) // 通过Vue的use方法注入Router
const router = new Router({}) //创建 router 实例，然后传 `routes` 配置
实例里面的配置具体可以去看官方文档和教程,这里我放一篇自己看的文章router安装及使用
routes:[
{
path:'/login',
component:()=>import(@/view/login/index) //这个方法使用的是路由懒加载路由懒加载官方文档
}
];
这个时候如果进行编译,就会报错,因为找不到路径/view/login/index;
因为我们还需要设置一个 alias 别称的东东
这个东西是在webpack.config.js里面的resolve=>alias配置的;加上 '@': resolve('src')即可,我理解的意思是@符号总会指代src这个目录,使用方法可以具体参考我看的链接alias的用法
这个时候就可以使用(@/view/login/index) ;
然后运行报错!!
懵逼很久,最后发现是没有定义resolve方法;可能某个版本会预设好这个方法,但是我这个没有;所以还需要加个方法
function resolve(dir) { //在webpack.config.js这个页面加上resolve方法
return path.join(__dirname, dir)
}
这里我们可以再大概了解一下resolve方法的返回值 path.join()这个东东是什么;path.join()含义
编译还是报错,这个时候import报错;然后再次去看了懒加载官方文档,有个注意事项
如果您使用的是 Babel，你将需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法;
所以还需要添加这个插件解析;怎么安装和使用;参考链接;
要说明一下的安装之后还是是需要在.babelrc里面配置一下的,链接里面推荐第一个(不知道为什么我一直安装错误,真TM多灾多难,到现在还没整好);
真的要崩溃了.总算安装好了,然后呢,提示我要求Babel“^7.0.0-0”，但加载了“6.26.3”;好像版本低了.babel/core6.几的版本,一天就把我整的没信心了;不是为了学习,拿到现成的脚手架啥都有了,哎...
不想用这个懒加载了,上火,知道这个鬼东西就行了,继续走下去
关于router的教程,我比较推荐router简易教程
网友评论