vue后台管理（一）：项目搭建

最近准备学习下后台管理系统的搭建，并且采用现在流行的前后端分离的架构，那么vue自然就是首选了。

这里我只讲一些实战操作，一些基础的语法各位就自己去学习了。包括环境的安装，如node的安装，请自行百度。

安装vue-cli脚手架

假设你已经安装好node的环境，那么就可以开始使用npm命令大展拳脚了。通过以下命令安装vue-cli

npm install -g @vue/cli

创建项目

这里我主要是通过vue的界面化创建项目。在命令窗口输入vue界面化的启动命令

vue ui

就会自动在浏览器打开项目创建和管理的界面

选择“创建”那一栏开始进行基于vue-cli的脚手架项目的创建。

输入项目名称，可以默认或者选择npm的包管理器（默认就是npm），点击下一步。

上图是项目的预设，就是类似项目需要什么插件依赖已经都加入进来了，如果你之前创建过项目并且保存过预设，对应的预设名称就会出现在这里，因为是第一次创建，我们选择手动。下一步

这里我们只选择babel，router（路由），linter/formatter(代码格式化)和最后一个使用配置文件。下一步

选择ESlint + Standard confing，lint onsave勾选。最后点击创建。

这个时候就会弹出如上的一个弹框询问我们是否保存成预设，就是会在上面步骤在的预设那一栏供你选择。这里我不保存预设，直接创建项目。

这个时候项目就算创建完成了。

配置插件（element-ui）

因为选择我打算使用element-ui作为界面ui，所以这里我们需要配置一下element-ui。在插件栏里面选择“添加插件”，搜索element-ui插件并选中，点击安装vue-cli-plugin-element开始安装。如下图

安装完成之后出现如下界面

第一个让你选择是完整引入还是按需引入，这里我们选择import on demand按需引入。然后点击完成安装，这样element-ui插件就安装完成了。

安装axios依赖（网络请求库）

选择依赖栏==》安装依赖，找到axios进行安装，记住这里选择的是运行依赖。如下图

这里我们项目也就算简单搭建好了，选择任务–》serve --》运行，运行完成之后选择启动app，如下图

出现如下页面，所以项目已经正常跑起来了。

改造

1.修改app.vue
app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<style>
</style>

2.清空views和components文件夹里面的内容，在views文件夹创建home/index.vue文件
home/index.vue

<template>
    <div>hell0, vue!!</div>
</template>
<script>
export default {
  data () {
    return {

    }
  }
}
</script>
<style lang="less" scoped>

</style>

注：这里我们用的style lang=“less”,所以需要按照开发依赖less和less-loader，这里就不具体说的，方法同上。

3.修改路由router
router/index.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  routes
})

export default router

重新启动app

至此，整个项目算是初始化完成了。

欢迎关注本人公众号和小程序，谢谢