创建vue-cli项目

1.创建一个文件夹Myadmin
2.进入该文件夹的操作命令
3.依次输入下列命令
vue init //初始化项目
npm install //安装npm 模块代码的依赖
cd Myadmin //进入项目目录
npm run serve //运行项目

编写后台管理系统界面

1. 继续在上面命令行内输入(这里是完整安装)

   npm i element-ui -S //安装element

2. 在Myadmin文件里的 main.js 中写入以下内容：
   import ElementUI from 'element-ui';
Vue.use(ElementUI);

3. 在项目里使用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`

  `}`

 `]`

`})`