vue

Vue.js

Vue.js是什么？

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架（Angular2）不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

不管你想不想了解，你只需要大概知道，Vue就是和jQuery一样是一个前端框架，它的中心思想就是数据驱动，像远古时代的老前辈jQuery是结构驱动，什么意思呢，以前我们写代码时常用$('.dom').text('我把值改变了')，这种写法先要获得结构，然后再修改数据更新结构，而Vue的做法直接就是this.msg="我改变了"，然后msg就会同步到某个结构上，视图管理抽象为数据管理，而不是管理dom结构了。

Vue.js安装

二.vue的环境：

1.node.js

2.cnpm

3.vue.js

4.vue/cli

脚本架

第一

安装node.js

下载：https://nodejs.org/en/

测试node安装成功：

node –v

第二

安装cnpm

测试cnpm安装成功：

cnpm -v

第三

安装vue.js依赖包

 命令cnpm install vue

测试vue.js安装是否成功:

cnpm vue –V

第四

全局安装vue/cli脚本架   命令cnpm install --globalvue-cli

测试vue/cli安装是否成功:

cnpm vue/cli –v

参考地址https://blog.csdn.net/changyinling520/article/details/78247389、

终止命令窗口是ctrl+c

创建一个简单的vue.js项目

创建一个基于webpack的vue项目

前端打包工具

Cd到你要的路径（D盘..、E盘..）

命令

vue init webpack dmsd-project 你的项目名称（vue init webpack）

可选可不选

在创建的项目中引入依赖包：

等安装结束后在安装依赖

然后输入路径安装依赖包

cd dmsd-project 到你项目的地址（绝对文件路径）

cnpm install  （依赖包）

设置启动自动加载页面

找到项目的配置文件、更改index.Js里面内容、False改成true、下面是更改端口、重启下项目生效

启动项目

cnpm run dev

路由

vue路由

定义路由

在components文件下创建vue文件、

然后在router文件下的index.js里面定义文件路径、

./代码文件当前路径、../代码文件二级路径、@代码src

仿照这上面写就行、

跳转页面《标签》

  -->

 默认会被渲染成一个 `` 标签 -->

Go to Foo

Go to Bar

安装组件

组件大全

为现代化 Web 界面而生的一个渐进式框架，以数据驱动和组件化的思想构建，采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

地址

https://www.awesomes.cn/subject/8311014#%E5%BA%94%E7%94%A8-%E6%A1%86%E6%9E%B6、

Element组件

参考地址、https://blog.csdn.net/zhanghuiqi205/article/details/79619317、

vue项目搭建的初始开始安装Element的步骤：

首先第一步是下载：npm i element-ui -S

装不上可以使用淘宝镜像cnpm i element-ui -S

有时候可能装不成功，多装几遍

cd到你的vue.Js目录下

第二步骤：在main.js中引入js和css

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

第三步骤：让vue引用Element ui

Vue.use(ElementUI);

然后，我们就可以使用Element ：那么我们引用一部分样式看看：

组件使用

组件地址https://element.eleme.cn/#/zh-CN/component/table、

查找你想要的相对内容复制到相对的页面去

把复制的代码加入到里面、否者样式不出来

此时可以把一个