搭建一个简单的后台管理系统(一)
创建vue-cli项目1.创建一个文件夹Myadmin2.进入该文件夹的操作命令3.依次输入下列命令vue init //初始化项目npm install //安装npm 模块代码的依赖cd Myadmin //进入项目目录npm run serve //运行项目编写后台管理系统界面继续在上面命令行内输入(这里是完整安装)npm i element-ui -S//安装e...
创建vue-cli项目
1.创建一个文件夹Myadmin
2.进入该文件夹的操作命令
3.依次输入下列命令
vue init //初始化项目
npm install //安装npm 模块代码的依赖
cd Myadmin //进入项目目录
npm run serve //运行项目
编写后台管理系统界面
-
继续在上面命令行内输入(这里是完整安装)
npm i element-ui -S //安装element
-
在Myadmin文件里的 main.js 中写入以下内容:
import ElementUI from 'element-ui';
Vue.use(ElementUI);
-
在项目里使用element
使用element文档里面的这个模板,复制代码并修改代码为:
<el-container style="height: 100%; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu router :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-tickets"></i>内容管理</template>
<el-menu-item-group>
<el-menu-item index="/article/index">文章列表</el-menu-item>
<el-menu-item index="/article/create">新建文章</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
`<el-container>`
`<el-header style="text-align: right; font-size: 12px">`
`<el-dropdown>`
`<i class="el-icon-setting" style="margin-right: 15px"></i>`
`<el-dropdown-menu slot="dropdown">`
`<el-dropdown-item>查看</el-dropdown-item>`
`<el-dropdown-item>新增</el-dropdown-item>`
`<el-dropdown-item>删除</el-dropdown-item>`
`</el-dropdown-menu>`
`</el-dropdown>`
`<span>王小虎</span>`
`</el-header>`
把代码复制到Myadmin里面的App.vue里面。
4.在**src**里面创建一个文件夹叫**views**,并在里面创建3个vue文件,分别是:**CreateArticle.vue**, **EditArticle.vue**, **ListArticle.vue**
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PDagFimV-1588384520298)(C:\Users\Lyin\AppData\Roaming\Typora\typora-user-images\image-20200502094504009.png)]
5.把创建的vue文件引入到router.js中(router已经在初始化项目的时候安装了)
`import ListArticle from '../views/ListArticle.vue'`
`import CreateArticle from '../views/CreateArticle.vue'`
`import EditArticle from '../views/EditArticle.vue'`
和
`export default new Router({`
`routes: [`
`{`
`path: '/',`
`name: 'home',`
`redirect:'/article/index'`
`},`
`{`
`path: '/article/index',`
`name: 'list-article',`
`component: ListArticle`
`},`
`{`
`path: '/article/create',`
`name: 'create-article',`
`component: CreateArticle`
`},`
`{`
`path: '/article/edit/:id',`
`name: 'edit-article',`
`component: EditArticle`
`}`
`]`
`})`
更多推荐
所有评论(0)