nodejs和Vue和Idea

文章目录

Vue环境搭建

概述：vue环境搭建：需要npm（cnpm），而npm内嵌于Node.js，所以需要下载Node.js。
下载Node.js：Node.js官方下载
安装Node.js：双击 - 选择目录 - 一路next（安装程序会自动把node、npm环境变量配置好）。
测试Node.js，npm：打开cmd，输入 node -v 回车，输入 npm -v 回车（node内嵌npm），出现对应版本号说明安装成功，一般是不会有问题的。
设置缓存文件夹和全局模块存放路径：
在nodejs路径下新建两个文件夹——node_cache , node_global，然后配置：
npm config set cache "D:\vueProject\nodejs\node_cache"
npm config set prefix "D:\vueProject\nodejs\node_global"
(引号中路径需要针对自己实际的安装路径)
设置成功后，之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里，g就是global
tips：此时你可以在 C:\Users\Administrator 目录下找到 .npmrc文件，以文本打开会发现刚刚配置的信息原来在这里
安装cnpm：
简介：基于 Node.js 安装cnpm（淘宝镜像）。由于npm是国际的，国内访问很慢，所以善良的淘宝做了他的镜像 —— cnpm，来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟一次以保证尽量与官方服务同步。”

安装：
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```
cnpm配置环境变量：
打开：任意文件夹 - （右键）此电脑 - 属性 - 高级系统设置 - 环境变量
新建CNPM_PATH变量 路径要根据自己的实际路径

编辑 path（要有global后面的反斜杠）

添加 %CNPM_PATH%;

打开cmd测试：cnmp -v；若失败则需要重启。
安装：
（下面步入正题…）
安装vue：cnpm install vue -g

安装vue-cli脚手架¹：cnpm install vue-cli -g

安装webpack²：
全局安装 —— cnpm install webpack -g，不是所有的项目都需要webpack的。通常我们会将 Webpack 安装到项目的依赖中。

创建vue项目：

创建一个基于 webpack 模板的新项目
vue init webpack my-project
这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
   vue-cli · Generated "my-project".
   To get started:
  
     cd my-project
     npm install
     npm run dev
     
     Documentation can be found at https://vuejs-templates.github.io/webpack

之后会生成目录结构
在这里插入图片描述

打包并运行Vue项目：
cd my-project
cnpm install
cnpm run dev
出现Listening at http://localhost:8080即说明成功了，可以输入地址 http://localhost:8080 访问刚刚创建的vue项目啦。（在cmd中输入 Ctrl+C 退出）

Idea安装

官网下载：地址建议下载 .exe安装包
接下来需要注意的就是安装中的一些选项，和安装后的插件安装，破解码等。

Idea中配置Vue环境

Ctrl+Alt+S 等价于 File -> Settings

ECMAScript 6
Ctrl+Alt+S，搜索 JavaScript，设置JavaScript language version 为ECMAScript 6（新版本不用）
安装Vue.js插件
Ctrl+Alt+S，搜索 plugins ，找到后搜索 vue安装插件即可
加入.vue
由于vue文件没有设置读取格式，所有没有颜色，所以一般以html方式打开：
Ctrl+Alt+S，搜索 File Types，找到HTML，点击‘+’，添加 *.vue
配置运行和打包功能

点击ok，你就有这两个运行环境了
实现新建vue文件功能（可选）
Ctrl+Alt+S，搜索 File and Code Templates ，添加vue文件模板
```
<template>

</template>

<script>
    export default {
        
    }

</script>

<style scoped>

</style>
```
大功告成！

Node.js介绍

nodejs不是一个js框架，千万不要认为是类似jquery的框架，nodejs是js运行时的运行环境，是对Google V8引擎进行的封装，是一个服务器端的javascript的解释器，类比java中jvm，java的开发是什么，无疑是jvm，自从有了jvm，java才能吹牛说自己是“一次编写处处运行”，不管你是windows还是linux，只要安装了对应版本的jvm都可以运行.class文件。

同样nodejs的作用和jvm的一样一样的，也是js的运行环境，不管是你是什么操作系统，只要安装对应版本的nodejs，那你就可以用js来开发后台程序。

这具有划时代的意义，意味着一直以来只能在浏览器上玩来玩去的js，可以做后端开发了，从有了nodejs后就催生出一大批用js做后台开发的前端人员，这部分人员就是偏前端的“全栈程序员”。

npm介绍

npm是nodejs的包管理器（package manager）。我们在Node.js上开发时，会用到很多别人已经写好的javascript代码，
如果每当我们需要别人的代码时，都根据名字搜索一下，下载源码，解压，再使用，会非常麻烦。于是就出现了包管理器npm。
大家把自己写好的源码上传到npm官网上，如果要用某个或某些个，直接通过npm安装就可以了，不用管那个源码在哪里。
并且如果我们要使用模块A，而模块A又依赖模块B，模块B又依赖模块C和D，此时npm会根据依赖关系，
把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦！（转载）

Vue.js介绍³

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue是基于数据驱动思想开发的javaScript框架，使用Vue框架开发可以大大减少繁杂的dom操作。数据驱动使得每一个HTML模块都可以高度内聚，通过给不同的HTML模块指定不同的数据模型，就可以实现前端的组件化开发方式。组件化可以降低系统各个功能的耦合性，并且提高了功能内部的聚合性。
另外Vue框架还开发了一套自己的模板语言，采用虚拟dom的方式渲染HTML，这使得我们可以依赖Vue来做模板渲染，实现前后端分离的开发方式。

Idea介绍

IDEA 全称IntelliJ IDEA，是用于java语言开发的集成环境（也可用于其他语言），IntelliJ在业界被公认为最好的java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

vue-cli是由vue官方发布的快速构建vue单页面的脚手架，和我们工地看到的脚手架就是那么一回事，它帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。 ↩︎
webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具，借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能webpack的官网。 ↩︎
vue的学习目录

 ↩︎