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文章。在此将整个过程记录下来存档。