搭建element-ui的Vue前端工程操作

一、安装npm镜像

（1）下载node.js， 配置node.js的环境变量

   检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"

检查Node.js版本

   在命令窗口输入：npm install -g cnpm –registry=https://registry.npm.taobao.org

二、安装全局vue-cli

（1）npm install -g vue-cli 回车，验证是否安装成功，在命令行中输入vue，出来vue的信息说明安装成功

三、全局安装 vue-cli

（1）npm install --global vue-cli 
四、创建一个基于 webpack 模板的新项目
（1）vue init webpack my-project (项目名)
（2）cd my-project
（3）npm install

（4）npm run dev

五、需要安装的环境
（1）npm install sass-loader --save-dev
（2）npm install gulp-sass
（3）npm install --save axios

（4）npm install element-ui -S

（5）npm install vuex --save

六、需要引入的包（element-ui）
 (1) import ElementUI from 'element-ui'
 (2) import 'element-ui/lib/theme-default/index.css'
 (3) import Vue from 'vue'

（4）使用：Vue.use(ElementUI)

六、项目代码结构

项目源码：https://github.com/davis0511/school-ui

（1）

（2）首页Home.vue

（3）App.vue

（4）main.js

import Vue from 'vue'
import Router from 'vue-router' 
import App from './App'
import routes from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'


Vue.use(Router)  
Vue.use(ElementUI)
const router = new Router({
  routes
});


Vue.config.productionTip = false


new Vue({ 
  router,  
  render: h => h(App)
}).$mount('#app')

（5）router.js

import Home from './Home' 
import classes from './class/classes' 
import student from './student/student' 


let router = [
   {
      path: '/',
      name: '学校',
      component: Home,
      redirect: '/classes',
 iconCls: 'fa fa-id-card-o',
 children: [
{ path: '/classes', component: classes, name: '班级管理' },
{ path: '/student', component: student, name: '学生管理' }
      ] 
    }
]; 
export default router;

七、完成之后，npm run dev; 界面渲染如下：