快速创建vue项目，了解vue工程结构(IDEA版)文档目录，vue工程结构(IDEA版)简介： 1、准备工具1.1、Node.js和vue-cli脚手架1.2安装
前言：如果你想快速了解vue工程的结构和html工程的区别，这是个好地方哦。
这里有详细的安装说明和图片，希望对伙伴有帮助。
1、准备工具vue-cli脚手架Node.jswebpack静态模块打包程序vue-router路由1.1、Node.js和vue-cli脚手架vue-cli 概述
vue-cli
官方提供的脚手架用于快速生成vue的项目模板
预定义的目录结构和基础代码就像创建Maven项目时可以选择创建骨架项目一样。 这个项目是立足之地，可以更快地进行开发。
在这里我们对vue-cli有了大致的了解，先别着急，先Node.js
安装node.js
node.js:http://nodejs.cn/download /
安装是指在没有大脑的下一步，安装在自己的环境目录中
安装后，打开cmd。 请以管理员模式打开此处
请在cmd下输入node -v，确认是否正确打印了版本号。 请在cmd下输入npm -v，确认是否正确打印了版本号。 此npm是一个软件包管理工具，与在linux上安装apt软件相同！
安装Node.js淘宝镜像加速器（cnpm）
那样的话，下载会更快~
这里下载可能有点慢。 合伙人必须耐心等待。 三四分钟左右。 再长也有可能。 (偷笑)。
如下图所示，安装成功
-g为npminstallcnpm-g http://www.Sina.com /
cnpm install vue-cli -g
如下图所示，安装成功
输入
vue list
安装vue-cli
进入创建Vue项目的路径。 以下是我的操作
在下图中，一路no，最后可以选择它，选择第三个，它可以向下移动
项目名称：项目名称，默认回车；项目描述：项目描述，默认回车；Author :项目创建者， vue build (用户绑定) :选择第一个默认回车是否安装安装虚拟路由器？Use ESLint to lint your code:使用ESLint 选择是否不安装n，是否不安装Set up unit tests:设备测试相关，以及是否需要在后期手动添加。 选择不安装n (后期需要手动添加) Setupe2etests with Nightwatch (单元测试相关，不安装n ) shouldwerunnpminstallforyouafterththed初始化
cd myvue npm install npm run dev
如果下面有错误的话，他会向你出示修复方法。 把那个告诉你的修复代码，再运行一次就行了。
最后成功了，ctrl c停止了
1.2、web包http://www.Sina.com /
webpack是指通过将Es6规范代码打包为ES5规范代码并执行Es6规范，可以在创建阶段报告错误。 这意味着web包本质上是现代JavaScript APP应用程序的静态模块化打包程序(module bundler )。 当webpack处理APP应用程序时，它会递归生成依赖关系图(dependency graph )，其中包含APP应用程序所需的每个模块，并将它们全部打包到一个或多个绑定中。
Webpack是当前最受欢迎的前端资源的模块化管理和打包工具，许多松散耦合模块可以根据依赖关系和规则打包为适合部署生产的前端资源。 也可以对按需加载的模块进行代码分离，并异步加载，直到实际需要为止。 通过loader转换，可以将Commons JS、AMD、ES 6、CSS、JSON、Coffee Script和LESS等任何形式的资源用作模块。
安装web包
npminstallwebpack-gnpminstallwebpack-CLI -
g 1.3、安装vue-router这里安装vue-router，我会在正式创建一个vue项目的时候在安装，也就是下一步。
路由是指根据URL分配到对应的处理程序。对于大多数单页面应用，都推荐使用官方支持的vue-router。Vue-router通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。
这里我们可以想象成是超链接跳转。
Vue Router是Vue.js官方的路由管理器（路径跳转）。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于Vue.js过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的CSS class的链接
HTML5历史模式或hash模式，在IE9中自动降级
自定义的滚动条行为
2、快速上手创建vue工程注意: 命令行都要使用管理员模式运行
1、创建一个名为hello-vue的工程
2、安装依赖，我们需要安装vue-router emement-ui sass 和 node-sass四个插件
进入工程目录
cd hello
安装 vue-router
npm install vue-router --save-dev
安装element-ui
nmp i element-ui -S
安装依赖
npm install
安装SASS 加载器
cnpm install sass-loader node-sass -save-dev
启动测试
npm run dev
安装步骤，结合上面看图片即可
创建一个名为hello-vue的工程
安装 vue-router
安装element-ui
安装依赖
安装SASS 加载器
启动测试，成功
这样我们的工程结构就已经搭建完毕，我们只需要用IDEA打开hello-vue即可
工程结构如下
如果这篇博客，对小伙伴有所帮助，记得点赞，收藏哦。