vue-cli新手总结

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

vue-cli安装下载网上有很多教程，但对于新手而言，有些地方需要自己摸索才能明白，对于，将我的总结心得分享一下。

首先在创建vue-cli项目之前，需要安装node、webpack、vue，安装成功后执行

npm install vue-cli -g

在你的目录下创建一个基于 webpack 模板的新项目

vue init webpack [name]

 

安装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 当中还可引入需要应用的其他插件。

未完待续。。。