idea创建Vue

idea创建Vue

基本概念

一：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在浏览器以外的一个执行环境，满足一些特定的场景需求。
二：npm
npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。
三：Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。通过webpack可以把基于模块开发的前端工程代码打包成可以在浏览器使用的格式。
四：Vue
Vue.js 是目前最火的一个前端框架，它和Angular.js、React.js 一起，并成为前端三大主流框架。Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发），前端的主要工作，主要负责MVC中的V这一层，主要工作就是和界面打交道，来制作前端页面效果。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合
五：关系说明
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的。

软件安装

一：应用软件
IntelliJ IDEA 、jdk、Node.js

1.1
jdk环境变量：
1.1.1：新建JAVA_HOME----->jdk的安装目录
1.1.2：在Path变量后面追加----->%JAVA_HOME%bin;%JAVA_HOME%jrebin;
1.1.3：新建CLASSPATH----->.;%JAVA_HOME%lib;%JAVA_HOME%libtools.jar（前面要加点）
安装node.js：
1.2.1：下载地址：https://nodejs.org/en/download/。下载完成后默认安装，安装完成后打开cmd 输入下面的命令查看是否成功安装：
1：C:UsersAdministrator>node -v
2：C:UsersAdministrator>npm -v
使用脚手架安装项目：
1.3.1：npm install -g vue-cli (全局安装一起搭建过的可以不用)
1.3.2：vue init webpack myvue(这个是项目名)
1.3.3：npm install (初始化这里会自动下载node_modules)
1.3.4：npm run dev(然后就可以执行运行命令了)
1.3.5：打开浏览器输入：http://localhost:8080
安装Idea：
1.4.1参考下载地址（网络来源，挺好的）：https://www.0daydown.com/02/867195.html(注意只能安装商业版的idea，否则没法安装插件)
安装Idea的Vue.js插件：


1.4.2：新建工程
GitHub地址：https://github.com/PanJiaChen/vueAdmin-template#vueadmin-template，vueAdmin-template是基于vue的一套后台管理系统基础模板，导入模板后如下：

1.4.3：配置run启动命令
选择Run菜单下的Edit Configuration，点击加号，选择npm，Name为Dev，package.json选择D:codevueAdmin-template目录下的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。

node-sass 安装失败 Failed at the node-sass@4.9.2 postinstall script的解决：
1、卸载node-sass
运行：npm uninstall node-sass
2、使用淘宝镜像运行：npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
3、重新安装指定的node-sass版本(安装失败的版本)
运行：npm install node-sass