前端环境配置

nodejs-npm-cnpm-vue-HBuilderX

nodejs下载

官网下载地址

https://nodejs.org/en/download/

注意：
图中 .msi和.zip格式区别：
1、.msi是Windows installer的数据包，实际上是一个数据库，提供安装，修改，卸载你所安装的程序。此外：它还包含有关安装过程本身的信息。例如：安装序列、目标文件夹路径、安装选项和控制安装过程的属性。
2、.zip是一个压缩包，解压之后即可，不需要安装。

1. 安装完node

 node -v  		//查看node是否已安装

2. 安装淘宝镜像

npm install -g cnpm -registry=https://registry.npm.taobao.org

cnpm -v		//查看cnpm是否真安装成功 cnpm -v

默认情况下，我们在执行npm install -g XXXX时，下载了一个全局包，这个包的默认存放路径位C:\Users\Administrator\AppData\Roaming\npm\node_modules下，可以通过CMD指令npm root -g

3. cnpm install   //使用cnpm install 安装node的依赖包
   

> npm会根据你在package.json中对各种依赖的定义去安装这些依赖。安装完之后，会产生两个结果：
>
> > node_modules: 所有依赖包
> >
> > npm-lock.json: lock 文件

 
4.  ```java
 cnpm run serve 启动项目

cnpm install --save vue-draggable-resizable@2.1.0

vue 安装

//cnpm install vue -g   // 安装vue.js   
//cnpm info vue		//查看安装的vue信息
cnpm install vue-cli -g//安装脚手架vue-cli
    				//检查其版本是否正确：vue --version或vue -V
/cnpm install webpack -g//安装webpack模板
//cnpm install --global webpack-cli//webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli
//webpack -v//安装成功后可使用webpack -v查看版本号
    //webpack --watch 用于监听变化

HBuilderX安装

官网地址

https://www.dcloud.io/hbuilderx.html