「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」
vue-router路由的使用
-
简介 使用Vue.js开发单页面应用(Single Page Application) 根据不同的url地址，显示不同的内容，但显示在同一个页面中给，称为单页面应用。 vue-router官网参考
-
基本用法 布局 配置路由
-
路由嵌套和参数的传递
vue-cli脚手架
- 简介
vue-cli是一个vue脚手架，可以快速构造项目结构
vue-cli本身集成了多种项目模板
simple 简单
webpack 包含ESLint代码规范的检查和unit单元测试
webpack-simple 没有代码规范检查和单元测试
browserify 使用的也比较多
browser-simple 也没有代码规范检查和单元测试。
- 步骤
2.1 安装vue-cli，其实就是配置vue命令的环境。
conpm install vue-cli -g
vue --version
vue list
2.2 初始化项目，生成项目模板
语法：vue init 模板名 项目名
如vue init webpack-simple vue-cli-demo
2.3 进入生成的项目目录，安装模块包
cd vue-cli-demo
cnpm install
2.4 运行 npm run dev//启动测试服务
npm run build//将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上。
- 使用webpack模板
注：ESLint是用来统一代码和风格的工具，如：缩进、空格、符号等，要求比较严格
模块化开发
1.vue-router模块化 cnpm install vue-router -s 1.1. 编辑main.js 1.2. 编辑app.vue 1.3 编辑router.config.js 2. axios模块化 cnpm install axios -s 使用axios的两种方式 方法1：在每一个组件中引入axios 方法2：在main.js中全局引入axios并添加到Vue原型中
- 为自定义组件添加事件
Element UI
- 简介
Element UI是饿了么团队提供的一套基于Vue2.0的组件库，用来快速搭建网站，提高开发效率。 Element UI ：pc端 MintUI ：移动端 2. 快速上手
2.1 安装Element ui
cnpm install element-ui -s
2.2在main.js中引入并使用组件
import ElementUI form "element-ui"
import "element-ui/lib/theme-default/index.css"//这样式文件需要单独引入 Vue.use(ElementUI)
这种方式引入了ElementUI中的所有组件。
2.3在webpack.config.js中添加loader
2.4使用组件
2.5使用less
自定义全局组件（插件）
全局组件（插件），就是指可以在main.js中使用Vue.js进行全局引入，然后在其他组件中就都可以使用了。入vue-router. 普通组件（插件）.每次使用时都要引入，如axios
