关键词：
项目中需要用到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 当中还可引入需要应用的其他插件。
未完待续。。。
新手嘛，先学习下vue2.0新手入门—从环境搭建到发布
Vue2.0新手入门—从环境搭建到发布转自：http://www.runoob.com/w3cnote/vue2-start-coding.html具体文章详细就不搬了，步骤可过去看，我这就写下使用总结1.Vue2.0推荐开发环境中一些安装就不说了Node.js 、npm 、webpack 、vue-cli ，... 查看详情
新手快速入门之vue-cli项目router的使用
首先安装好nodejs和npm环境后，创建一个基于webpack模板的新项目，在Windows的cmd命令行模式或者node环境下新建命令：$vueinitwebpackproject-namecdproject-namenpminstallnpmrundev以上命令则可创建一个新项目（项目名称project-name可自己输入）... 查看详情
新手入门vue使用vue-cli创建项目
本文是针对对于完全没有了解过vue和npm，连运行环境和项目构建的都不会的小白，对于前端老司机的就不用看了，浪费时间。使用npm与vue-cli构建vue项目 第一步：安装运行环境（node与npm）nodeJ官网：http://nodejs.cn/ 下载安装... 查看详情
vue脚手架（vue-cli）安装总结
单页Web应用（singlepagewebapplication，SPA），就是只有一张Web页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序。提供一个官方命令行工具，可用于快速搭建大型单页应用（SPA）。该工具为现... 查看详情
新手使用vue构建单页面应用实例
步骤：1.使用vue-cli创建项目2.使用vue-router实现单页路由3.用vuex管理我们的数据流4.使用vue-resource请求我们的node服务端5.使用.vue文件进行组件化的开发 一、目录结构：二、搭建项目先安装vue-cli：sudo npminstall-gvue-cli使用vue-cl... 查看详情
vue2.0新手入坑环境搭建
每周不定期更新 专业团队接APP外包联系QQ1129580542 vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目，GitHub地址是：https://github.com/vuejs/vue-cli 一、安装node.js首先需要安装node环境，可以直接... 查看详情
98道经典vue面试题总结（长期更新）(代码片段)
...！或添加群主微信hanxuming888进群)本文档基于vue-cli技术栈总结了vue-cli工程vue.js核心知识vue-router路由vuex状态管理器axios等http请求移动端适配Tab切换等常用功能vue与原生app混合交互vue生产环境部署vue各项技术源码解析MVVM设计模式vue... 查看详情
vue.js学习——vue-cli初始化项目的坑终极解决办法和总结（离线安装webpack下载模板）(代码片段)
...到vue脚手架搭建过程 本文主要针对上一篇博文做简要总结，并且手把手教授如何用vue-cli脚手架初始化项目，以及记录本人在这一过程中遇到的坑和解决办法。 查看详情
vue-cli安装步骤（转载）
参考资料:Vue2.0新手完全填坑攻略—从环境搭建到发布1.Node.js安装 https://nodejs.org/en/download/2.安装vue-cli npminstall-gvue-cli3.使用vue-cli初始化项目vueinitwebpack-simplemy-project-name （图片来源网 查看详情
ros探索总结——ros新手教程
...开始准备动手感受一下ROS的强大了。ROS官网的wiki上针对新手的教程很详细，最好把所有的新手教程都搞清楚，这是后面开发最基础的东西。尽管如此，ROS对于新手来说还是很难上手，这里，我就来总结一下我当时学习的历程，... 查看详情
小白新手springcloud开发简单总结-springboot概念(代码片段)
...xff09;简化监控二 快速搭建SpringBoot项目三总结前言在小白新手SpringCloud开发简单总结（一 查看详情
git基本操作命令总结--新手必备
$gitinit创建git仓库$gitadd<filename>将工作区文件添加进暂存区$gitadd-f<filename>强制添加$gitchech-ignore-v<filename>检查.gitignore文件中规则与该文件的冲突$gitcommit-m<message>暂存区文件提交至仓库，-m为此次提交的备注$gitstatu... 查看详情
这可能是vue-cli最全的解析了……(代码片段)
题言：相信很多vue新手，都像我一样，只是知道可以用vue-cli直接生成一个vue项目的架构，并不明白，他究竟是怎么运行的，现在我们一起来研究一下。。。一、安装vue-cli，相信你既然会用到vue-cli，自然node环境是OK的，直接命令... 查看详情
3天学会vue之基本知识（第三天：单文件组件（vue-cli））：结合项目开发经验，总结最关键的内容
前置知识：1、VUE的基本语法知识；2、javascript（基本js语法）；3、css（知道语法规则即可，无需全部掌握）；4、html（知道标签规则即可）；5、Vue组件基础知识单文件组件的基本知识... 查看详情
新手vim常用命令总结（转)
转自 https://www.cnblogs.com/yangjig/p/6014198.html 在命令状态下对当前行用==（连按=两次）,或对多行用n==（n是自然数）表示自动缩进从当前行起的下面n行。你可以试试把代码缩进任意打乱再用n==排版，相当于一般IDE里的codef... 查看详情
vue-cli开发模式如何与服务端api结合？
...deapi?【发布时间】：2019-10-1809:27:02【问题描述】：我是vue新手，在这里有点困惑。我正在使用vue-cli构建一个vue应用程序，我知道我可以使用npmrunserve运行开发服务器，它在我的package.json中作为脚本引用为vue-cli-servi 查看详情
快速入门vue-cli配置(代码片段)
作为一名使用了一段时间Vue.js的新手，相信和不少初入Vue的朋友一样，都对Vue-cli的配置一知半解。后来通过对webpack的学习，也算是对脚手架的配置有了一定的了解，所以也想把这段时间自己的成果分享给大家，希望能和大家一... 查看详情
来自一位react新手的react入门须知
参考技术A所有的html，css都可以写在js中，这就是jsx的用法。用于验证数据的类型是否是满足你的需要,不过我在现有的项目中没有特意的指定数据的propTyoe，因为这些都是前后端约定好的。此用法如下图：这个如同vue组件里面的pr... 查看详情