IDEA创建Vue项目

※基础知识：

A.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在浏览器以外的一个执行环境，满足一些特定的场景需求。

B.npm

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

C.webpack

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

D.vue

是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件系统和vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。在开发中vue会把使用vue语法修饰的html标签与js对象进行绑定，从而使html值变化时可以同步修改js对象，js对象值变化时可以在页面暂时，使开发从复杂的document操作中解脱出来。

E.iview

一套基于 Vue.js 的高质量 UI 组件库，通过iveiw可以快速的开发出风格一致的前端界面。

※环境搭建：

a.检测是否安装好nodejs和npm

node -v
npm -v

如果没有安装需要先安装node
nodejs的下载路径：https://nodejs.org/en/download/

b.使用taobao镜像(cnpm仓库)

c.安装vue.js(简称vue)

打开cmd，输入：npm install vue

d.安装vue-cli（vue脚手架）

npm install -g @vue/cli

e.测试vue脚手架是否安装成功

vue -V（这里是大写的V！！！）

※ 一、简单创建vue项目

（1）

（2）


如果没有vue.js选项，IDEA安装vue.js的插件即可

目录结构：

※二、初始化项目(初始化包结构)

（1）项目目录下初始化项目命令（如IDEA中的终端）[与 @vue-cli 版本相关，高版本些的这个似乎就不能执行]

vue init webpack

（2）项目的上级目录下初始化项目命令（如cmd）

vue init webpack projectName(项目名)

然后，进行选项配置：

正确初始化后项目目录：

命令错用导致的目录：

理解IDEA的命令提示（命令须逐个执行）：

package.json文件：
（1）创建package.json文件的命令：
npm init 或 npm init -y
（2）package.json文件的作用：
展示项目所依赖的npm包

※三、启动项目

进入项目目录：
cd vue-01（利用cd命令切换进入项目目录）
编译：
npm install（产生node_modules目录）
启动：
npm run dev

可在package.json文件上右击，选择show npm scripts

这些命令都是在package.json文件里预定义的。dev和start是一样的，start即是执行npm run dev

※四、访问页面

上一步执行完毕后，会打印项目地址，默认：localhost：8080

五、报错处理

（1）npm install命令的执行报错（进而导致无法进行有效的vue项目的部署）

解决方案来源：CSDN任聪聪博客

总结：镜像问题 + npm install命令需要管理员权限（cmd管理员身份运行）{执行成功，则项目目录下产生node_modules目录，进而可以执行 npm run dev 命令}

解决方案：npm的镜像问题
使用淘宝镜像：https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org  //设置镜像
npm config get registry  //检查镜像

（2）更新镜像过程的网络不好导致的报错

六、部署vue项目

npm run build 产生dist目录

七、 附录：
（1）vue指令基本使用大全：
a. vue指令基本使用大全
b. CSDN