【VUE初试牛刀】

以下在windows10系统下进行

配置VUE的环境

构建node环境

在nodejs官网下载node并且安装nodejs在wind10（推荐下载长期支持版）下载地址:https://nodejs.org/zh-cn/download/current/
完成安装后打开电脑的cmd测试node环境:

出现以上显示表示node环境已经构建好了。

换淘宝的源提升下载速度

cmd中输入命令:

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

下载完成后，输入测试命令:

cnpm -v

出现以上显示表示换源成功

在npm的基础上又安装了yarn

//yarn 常用命令
安装yarn ： npm install -g yarn
//安装完设置一下淘宝镜像
yarn config set registry https://registry.npm.taobao.org
//安装成功后，查看版本号： yarn –version
//以下命令以后在开发项目中使用
yarn add [package]
// 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
//yarn add [package]@[version] // 安装指定版本，这里指的是主要版本
//yarn add --dev/-D // 加到 devDependencies
//yarn add --peer/-P // 加到 peerDependencies
//yarn add --optional/-O // 加到 optionalDependencie 默认安装包的主要版本里的最新版本

改变npm全局默认C盘安装路径

自定义安装路径，在自己设定目录下D:\node\，新建两个文件夹node_cache和node_global

设置路径地址

npm config set prefix "D:\node\node_global"
npm config set cache "D:\node\node_cache"

配置node环境变量
增加环境变量NODE_PATH 配置的内容为node_modules 路径：D:\node\node_global\node_modules

在系统变量Path中增加路径：D:\node\node_global

至此，node就安装好了，并改变了默认的包下载位置。

搭建vue前端框架环境

在Windows PowerShell终端中输入命令:

cnpm install --global vue-cli

可以使用yarn安装

yarn add vue
npm install -g @vue/cli
//OR
yarn global add @vue/cli
//安装完查看版本
vue --version
//后期如果需要更新可输入一下命令
npm update -g @vue/cli
//或者
yarn global upgrade --latest @vue/cli

测试VUE是否安装完毕，PowerShell中输入

vue -V
vue -cli -V

显示正常

如果想使用vue3.0和vue-cli4.0，那么按照以下步骤操作：
1、先卸载vue2.0的脚手架，全局卸载

 cnpm uninstall vue-cli -g 

2、安装vue3.0的脚手架，全局安装

cnpm install -g @vue/cli@4.5.12 

使用VSCode新建vue框架项目

本机已安装VSCode，具体安装方法，度娘告诉你。
插件安装：
1、vetur：支持vue代码高亮显示。
2、ESLint：是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 能够帮你轻松写出高质量的 JavaScript 代码
3、JavaScript Debugger ： 映射vscode上Node.js程序的断点到chrome上，方便调试

创建vue项目

在vscode打开项目文件夹，然后打开终端，输入vue init webpack test，意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的，test 是整个项目文件夹的名称。

vue init webpack test

或者 输入命令 vue create + 你的项目名 （vue-cli4.0/vue3.0使用方式？）
或者通过vue 图形化界面创建项目：

vue ui

如果出现乱码，则可以输入：

chcp 65001

然后按照提示，输入：

  cd test
  npm run dev

在浏览器里可以看到首页：

成功搭建了webpack基础的test项目

vue项目架构介绍

我们编程的内容主要在src文件夹中，目录介绍：

assets：用于存储页面显示的图片资源
components：views中的公共部分存储在此
router：存储路由信息，用于页面跳转
views：存储页面组件，是编程的重心
App.vue：个人理解就是普通首页，可以随意更改
main.js：整个vue项目的公共配置

vue 的特别之处

原始网页是Header+Body作为一个整体的开发，vue是将Header、Body作为单独组件分开开发，与封装的思路是一样的，所以现在不称为页面，称为组件。以前的衣服是一套一套地设计，外套、衬衫、裤子、鞋一起设计，成套的设计。vue是将外套、衬衫、裤子、鞋分开设计，然后再自由组合成一套衣服。

vue3.0

vue3.0通过vue ui或者vue create创建项目后，需要添加路由

vue add router

启动项目使用下面命令

#start your app by running the following command
npm run serve

D3和Cytoscape

npm install --save d3@5
npm install --save jquery@3.1.1
npm install --save cytoscape
npm install --save cytoscape-dagre cytoscape-popper dagre tippy.js
运行程序出现错误
D:\ly\develop\vue\cyto\src\components\D3cytoscape.vue
45:31 error ‘_companyRadius’ is assigned a value but never used no-unused-vars
45:51 error ‘_personRadius’ is assigned a value but never used no-unused-vars
45:70 error ‘_circleMargin’ is assigned a value but never used no-unused-vars
45:89 error ‘_circleBorder’ is assigned a value but never used no-unused-vars
86:30 error ‘_currentKeyNo’ is defined but never used no-unused-vars
199:29 error ‘sourceNode’ is assigned a value but never used no-unused-vars
200:29 error ‘targetNode’ is assigned a value but never used no-unused-vars
219:56 error ‘i’ is defined but never used no-unused-vars
243:26 error ‘filterLinks2’ is defined but never used no-unused-vars
250:29 error ‘sourceNode’ is assigned a value but never used no-unused-vars
251:29 error ‘targetNode’ is assigned a value but never used no-unused-vars
284:29 error ‘i’ is already defined no-redeclare
295:55 error ‘i’ is defined but never used no-unused-vars
308:98 error ‘distanceMin’ is assigned a value but never used no-unused-vars
339:56 error ‘i’ is defined but never used no-unused-vars

错误原因：eslint的验证语法

解决办法：在错误语句后添加注释

// eslint-disable-line no-unused-vars

安装vue-element-admin

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18n 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。
下载 vue-element-admin，并启动
官方：https://github.com/PanJiaChen/vue-element-admin

框架里的组件样式可以从 element 上找

element：http://element-cn.eleme.io/#/zh-CN/component/table

可以直接下载压缩包解压，也可以通过 git 下载

#安装依赖
npm install
 
#建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
 
#启动服务
npm run dev

npm报错

npm install报错 No git binary found in $PATH

GIt下载地址:https://git-scm.com/downloads

C:\Program Files\Git\bin
也就是你的Git安装目录的bin目录，
添加到用户的环境变量即可

以上参考了多位大V文章。在此将整个过程记录下来存档。