vue+iview+mock+nodejs 实现简单的SPA后台管理系统（一）

前言

先记录下整体的思路，免得做着做着走偏了。

作死的目的：

1. 构建vue项目，熟悉单页应用开发，掌握vue-router,vuex等常用技巧。
2. 引入iview框架，熟悉该类型框架的内容和用法。
3. 引入mock.js，熟悉用法，培养前后端分离开发习惯。
4. 构建nodejs后台，掌握简单的后台，熟悉数据库操作，培养全栈开发能力。

作死的过程：

• 安装开发环境
• 开发过程详解
• 项目经验总结

这里稍微废话一下

开发环境安装的步骤，各大搜索引擎上都有详细的文章，这里不赘述，小白请自行解决，就当锻炼学习能力了。

一、安装开发环境

---

1.安装node.js

2.安装vue

3.相信你已经完成了以上两步，并且成功的运行了项目，此时的项目目录如下图所示

4.接下来我们安装要使用的插件，首先把项目根目录下的node_modules删掉，然后打开package.json，将dependencies内的内容修改为以下内容

//less跟sass可以根据你的具体需求安装
"dependencies": {
    "axios": "^0.18.0", //用于请求
    "css-loader": "^0.28.11", // 加载.css文件
    "iview": "^3.1.2", //UI框架
    "less": "^3.8.1", // css预编译
    "less-loader": "^4.1.0", // 加载.less文件
    "mockjs": "^1.0.1-beta3", //模拟数据
    "node-less": "^1.0.0", // 处理less
    "node-sass": "^4.9.3", // 处理sass
    "normalize.css": "^8.0.0", // 处理浏览器兼容的样式文件
    "sass-loader": "^7.1.0", // 加载.sass文件
    "style-loader": "^0.23.0", //将css-loader内部样式注入到我们的HTML页面
    "vue": "^2.5.2", // vue
    "vue-router": "^3.0.1" //路由管理器，单页应用的核心
  },
 

5.回到项目根目录下，打开命令行工具，使用 npm install 或 cnpm install 安装项目所需的依赖包。

6.找到并打开根目录下 src 文件夹里的 main.js修改为如下内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview' //引入iview
import 'iview/dist/styles/iview.css'    // 使用 CSS

Vue.config.productionTip = false
Vue.prototype.$api = api
Vue.use(iView) //这里一定要将iview扩展到vue实例中
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

7.找到并打开根目录下 src/components/HelloWorld.vue 文件，然后再打开 iveiw文档 随便找一个看的顺眼的组件复制代码，如下图

替换HelloWorld.vue里的内容。

8.找到并打开根目录下 src/App.vue 文件修改如下

<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/*#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}*/
</style>

9.回到项目根目录下，打开命令行工具，运行 npm run dev ，稍等片刻~~~~~~~~~~，出现下图

10.然后按最后的地址打开（vue 项目构建时默认的端口为 8080，因为我本地运行了两个项目所以把端口修改了一下，小白要注意不要把错误答案一并抄了去，~~撇嘴笑），如下图

至此，我们就迈出了千里之行的第一跬步~~~~~~~~~

下一篇文章我们共同探讨iview使用里遇到的问题。