Vue-element-admin系列 => [02] 使用admin内置模板

177 阅读1分钟

刚刚在github上面clone了vue-element-admin启动后发现是英文的

解决:

  • 可以把下载的vue-element-admin切换带到i18n的分支上面
    切换到 i18n 的分支 git checkout i18n
    查看当前分支 git branch -vv
    运行结果
    【*】号选择的地方就是你现在的分支
    因为clone的时候没有clone到语言包所以还需要install一下语言包执行 npm install --save vue-i18n
    最后再次 npm run dev 就是中文的了

克隆项目

git clone github.com/PanJiaChen/…

进入项目目录

cd vue-element-admin

安装依赖

npm install

建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题

npm install --registry=registry.npm.taobao.org

本地开发 启动项目

npm run dev

2.然后git template

商品列表渲染
在这里插入图片描述

点击编辑按钮跳转到编辑的模板页面

首先配置编辑模板的路由设置未hidden:true,不显示在侧边栏
在这里插入图片描述

然后通过@click=“editProduct(scope.row.id)”

路由动态传参id
在这里插入图片描述

然后执行 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … 获取我的id,{{this.route.params.id}}这个样就可以把我前一个页面的参数传到我编辑页面来了
在这里插入图片描述

在这里插入图片描述

然后再编辑页面获取id发送请求
给const id = this.$route.params.id
发请求
在这里插入图片描述
这个URL地址传一个id进去拼接

url ‘xxxxx’ + id
在这里插入图片描述
然后渲染就可以了

设置按钮左右位置 align=“right”

在这里插入图片描述