前端搭建基于vue+iview的后台管理系统

1. 依赖环境
(1) node:点击node访问官方下载安装
(2) vue-cli:npm install -g vue-cli

提示:**
国内访问npm官方库可能有些缓慢,你可以设置淘宝的npm镜像:

安装 cnpm,用 cnpm 命令替换 npm 命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

设置镜像源为淘宝 npm 镜像

npm set registry https://registry.npm.taobao.org

(3) npm init webpack
之后vue-cli会开始自动下载依赖,完成后将得到【llplatform】项目,你可以通过以下命令启动它,然后浏览器访问localhost:8080,即可看到一个demo页面:
前端搭建基于vue+iview的后台管理系统
2. 安装iview组件库
本项目选择iview组件库,个人感觉其风格看起来更舒服。
(1)引入iview

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’
import ‘iview/dist/styles/iview.css’ // 使用 CSS

Vue.config.productionTip = false
Vue.use(iView)
/* eslint-disable no-new */
new Vue({
el: ‘#app’,
router,
template: ‘’,
components: { App }
})

在main.js中添加了

import iView from ‘iview’
import ‘iview/dist/styles/iview.css’ // 使用 CSS
Vue.use(iView)

(2) iview 安装

npm install --save iview
前端搭建基于vue+iview的后台管理系统
3.此时你已添加了iview,你可以修改src/components/HelloWorld.vue文件,添加一个iview的按钮组件来查看是否添加成功:
前端搭建基于vue+iview的后台管理系统
前端搭建基于vue+iview的后台管理系统