idea中搭建vue（详细版）

本人也是刚刚学习vue，在搭建的过程中碰到了许多问题，在这里和大家分享一下我的搭建过程，一开始对于vue各种概念一头雾水，先和大家说一下vue搭建所涉及的工具概念。

一.基本概念：

1.Vue

Vue.js 是目前最火的一个前端框架，它和Angular.js、React.js 一起，并成为前端三大主流框架。Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发），前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合

2.node.js

Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。总结一下，node,js提供了javascript在浏览器以外的一个执行环境，满足一些特定的场景需求。

3.npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

4.Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。

5.vue-cli

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

vue-cli是有Vue提供的一个官方cli，专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板，是为现代前端工作流提供了 batteries-included的构建设置。只需要几分钟的时间就可以运行起来并带有热重载，保存时 lint 校验，以及生产环境可用的构建版本。

6.相互之间的关系

npm install是帮助安装 vue,或React到本地，npm install也可以安装vue,React的开发工具。当然你完全可以像jQuery一样自己找网站下载下来，在页面中引入。 npm就好比是一个前端的插件商店，里面有各种开发者写的包，你需要的时候就从命令行安装就可以了，类似与linux的apt的概念。 node.js是服务端，浏览器端js有很多缺陷，比如不能操作本地文件呐。而服务端的js就可以，所以用node就能帮我们管理文件，处理I/O，然后经过牛逼的开发者一封装，一改造，一个grunt就出来了。

 vue的开发本身是不依赖node的，不过vue的脚手架工具vue-cli里面集成的webpack是基于node开发出来的。 因此只能说webpack是依赖node的。

 

 二.vue安装流程:

1.安装node.js npm也随着安装

安装node.js下载地址：https://nodejs.org/zh-cn/

在cmd中输入node -v查看是否安装成功：

由于npm在国内镜像安装缓慢，建议使用淘宝镜像，以后用到npm的滴地方就用cnpm代替就行了

在cmd命令框运行命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后检验是否安装完成，运行cnpm -v查看版本

 2.下载vue-cli

在cmd中输入npm install @vue/cli -g，自动下载vue-cli.-----------------------------------卸载vue-cli在cmd中输入npm uninstall vue-cli -g

测试是否安装成功： vue -V //注意：-V是大写的V，不是小写的v

输入 vue init webpack 项目名 创建一个新项目

3.在idea中下载vue.js插件

如何安装vue.js请看https://www.jb51.net/article/170884.htm

4.安装webpack工具

cnpm install -g webpack

5.下载git，不然在搭建脚手架是会报找不到git

6.基本工具安装完成后，开始创建项目

在cmd中输入-------vue init webpack 项目名

 创建成功的项目的目录结构：

我们还少一个文件夹：nodo_modules,这个文件夹是整个项目依赖包的文件夹。

1.第一步：cd test进入test的项目（必须进入项目里才能安装啊!!）

2.第二步：cnpm install (此处可以用cnpm代替npm,如果你安装了阿里的镜像)

 安装完成项目结构

 

7.在idea中打开上边新建的vue项目，在idea中的Terminal中输入cnpm run dev

运行成功展示：htttp://localhost:8080

 

 

8.可能遇到的报错

1.到创建Vue项目，即是在输入vue init webpack my-first-vue 回车键之后显示：

Command vue init requires a global addon to be installed.

Please run npm install -g @vue/cli-init and try again.

解决办法：npm install -g @vue/cli-init 运行这个 在创建项目