vue-cli新手总结

Posted wangyuyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli新手总结相关的知识,希望对你有一定的参考价值。

项目中需要用到vue-cli脚手架来搭建前端框架,对于vue小白,总结一下自己遇到的问题以及解决方案,还要学习的地方有很多。

vue-cli安装下载网上有很多教程,推荐看https://www.jianshu.com/p/5ba253651c3b,有很详细的项目搭建,但对于新手而言,有些地方需要自己摸索才能明白,对于,将我的总结心得分享一下。

 

安装vue-cli时出现安装不上的问题

安装webpack时,执行npm install webpack -g,但是检查是否安装上时(webpack -v)出现下图问题

技术分享图片

但是按照npm install webpack-cli -D执行命令执行,仍然还是安装不上,这里解决方式是执行npm install webpack-cli -g,执行一遍就能安装上了。

 

安装完成后,用webstrom打开项目(其他编辑软件也可)会出现如下结构

技术分享图片

到此一切很顺利,项目雏形搭建完成了。建议在搭建项目之前对于vue基础知识有一定的掌握,在使用组件时,有很大帮助。

接下来介绍一下项目中各个文件的用法

技术分享图片

根据项目结构也能看出,index.html是入口,那只有一个主页面,怎么进行多个页面的跳转呢?

这里就应用到vue的组件,相当于直接在组件内将所有页面定义好,只要切换组件就可以了,而src->components目录下的所有vue文件就是一个个的组件,在组件之内是可以相互引用的(后面回详细解答)。也可以自己创建目录放vue文件(src->pages文件)。

组件详解:

拿一个例子,讲解一下组件中各个部分的应用与说明

技术分享图片

 

现在大概了解页面是怎么创建出来的,但是如何引用相应的组件呢?

这里就用到src->main.js与src->router->index.js两个文件

main.js

技术分享图片

index.js 

技术分享图片

至此,项目内常用的几个文件之间的调用与结构大致如图,在index.js 当中还可引入需要应用的其他插件。

未完待续。。。

 

以上是关于vue-cli新手总结的主要内容,如果未能解决你的问题,请参考以下文章

新手快速入门之vue-cli项目router的使用

新手入门vue 使用vue-cli创建项目

webpack vue-cli 常见问题总结

vue-cli 安装步骤(转载)

这可能是vue-cli最全的解析了……

vue+vue-cli+vuex+vrouter 开发学习和总结