搭建element

搭建element

一、安装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

学校管理系统

{{sysUserName}}

我的消息

设置

退出登录

theme="dark" unique-opened router>

{{child.name}}

{{item.children[0].name}}

theme="dark" unique-opened router>

{{child.name}}

{{item.children[0].name}}

{{$route.name}}

{{ item.name }}

（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; 界面渲染如下：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。