路由。
根据后端理解路由
单页面就是打包之后只有一个页面。
------------------------------------------------------------------------------01-------------------------------------------------------------------------------------
探究下路由为什么可以生效？
第一步：
第二步：
第三步：
路由实验代码：
安装脚手架：
# 全局安装 vue‐cli
npm install ‐g vue‐cli 这个脚手架带路由的功能
# 创建一个基于 webpack 模板的新项目
vue init webpack vue‐router‐demo
# 安装依赖，走你
cd vue‐router‐demo
npm run dev
注意这个是怎么写的
表示当前的vue工程要使用路由，就是一个开关。这里面是路由的底座。
整个页面。
注意这个：显示什么取决于
路由地址
<router-view/>
main.js是总的入口。在这里使用的路由器。
带路由的vue。
项目的由来：
第一步：首先定义路由，就是默认的界面
第二步：将这个默认界面的路由插入到路由的底座
---------------------------------------------------------------02----------------------------------------------------------------------------------------------
关键知识点：
-------------------------------------------------------------------------03----------------------------------------------------------------------------------------
动态路由：
接受的参数： {{ $route.params.id }}
注意一点引用全局的变量用$。
-----
目前还没有子路由，直接在主路由的底座上面的。
这个底座指允许一个路由的界面插入禁区。
-------------------------------------------------------------------------------04--------------------------------------------------------------------------------------
嵌套路由，子路由。
第一步：写关于的子路由。
{
path: '/about',
name: 'About',
component: About,
children: [
{ path: 'address', component: Address },
{ path: 'linkman', component: Linkman }
]
}就是路由视图在跳转的一个路由但是原先的路由页面不消失。
第二步：写自己的底座。
注意这个底座要是不写的话点击是没有反应的。上面那个是错的。
-------------------------------------------------------------------------05-------------------------------------------------------------------------------------
十次方的路由的代码
index.js是默认的所以不用写
true不会在主界面的菜单出现
注意在哪里生效的：
-----------------------------------------------------------------------06-----------------------------------------------------------------------------------
代码生成器，挂菜单
-------------------------------------------------------07--------------------------------------------------------------------------------------------
mock
-------------------------------------------------------------------08-------------------------------------------------------------------------------------
这个是直接自己拷贝的。
企业管理的 编辑 复合输入框
------------------------------------------------------------09------------------------------------------
图片上传:用的是框架UI的上传组件。
带格式校验的。
第一步：
<el-form-item label="LOGO">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:on-success="handleAvatarSuccess"//上传成功自动调用的钩子函数
:before-upload="beforeAvatarUpload">//上传之前调用的函数
<img v-if="imageUrl" :src="imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>第二步：
这个要在data中自己定义。
第三步：
至于存的什么没有讲。
-------------------------------------------------------------------------10-------------------------------------------------------------------------
单选按钮和可搜索得下拉框
----------------------------11------------------------------------------
课搜索得下拉框
----------------------------12------------------------------------------
文章管理：代码生成。
频道 文章 专栏管理
-------------------------------------------------------------------------13---------------------------------------------------------------------------------
mock数据。
-----------------------------------------------------------------------14--------------------------------------------------------------------------------------
频道管理。专栏审核：
-------------------------------------------------------------------15----------------------------------------------------------------------------------------------
文章审核，注意富文本编辑器。
如何写富文本编辑器？
富文本：
v-html=......
----------------------------------------------------------------16---------------------------------------------------------------------------------
写逻辑。
审核完成。
---------------------------------------------------------------------17---------------------------------------------------------------------------
VueX是很重要的。
记住登陆的状态。
看下登陆：
登陆成功保存登陆状态，名称，头像等信息。
------------------------------------------------------18----------vuex----------------------------------------------------------------------------------------------
建工程：
看到依赖。
我们要安装vuex：
安装vuex。
安装结束：
-----------------------------------------------------------19----------vuex----------------------------------------------------------------------------------
在src下创建文件夹：
定义一个仓库。
读取状态。
打开vuex状态管理的开关。
注意怎么写的：
Vue.use......打开状态管理的开关。
第一步：定义一个常量，创建store，实例有个属性为state。导出store。
第二步，main.js使用：
这里的用$引用。
第三步：在页面取读取状态。
注意这个必须是state。
------------------------------------------------------20----------vuex-------------------------------------------------------------------------------------------
改变状态：
第一步：定义mutations，理解为对一堆的方法。里面的方法要有一个参数。修改状态的入口。1是随便定义的，2是写死的。
第二步：commit。都是固定的。
---------------------21----------vuex-------------------------------------
状态的共享：状态在很多有页面共享，读取store的值。
第一步：
--------------------------------------------------------22----------vuex---------共享-------------------------------------------------------------
提交载荷：就是传入额外的参数而已。
第1步：
第2步：
----------------------------------------------------------23----------vuex------------------------------------------------------------------------------------
action:
第一步：定义action。
为什么使用action是因为mutations是不允许使用异步操作的。
注意上图的第二个increment是自己定义的，可以随便换，context与state有系统的状态。
第二步：使用dispatch方法，来调用我们的action。
action：可以在2进行异步的操作。
我的例子：
---------------------24----------vuex-------------------------------------
派生属性getters：
第一步：
第二步：
----------
我的代码：
------------------------------------------------------------------25-------------------------------------------------------
附加：模块化的东西。注意开发时候要模块化。
具体如何使用看文档。
-------------------------------------
登陆：看文档。
