微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

搭建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)

七、项目代码结构

项目源码:nofollow" target="_blank" href="https://github.com/davis0511/school-ui">https://github.com/davis0511/school-ui

(1)

(2)首页Home.vue

rush:xhtml;">
arator="/" class="breadcrumb-inner">

(3)App.vue

(4)main.js

h(App) }).$mount('#app')

(5)router.js

rush:xhtml;"> 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; 界面渲染如下:

以上这篇搭建element-ui的Vue前端工程操作实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文地址:https://www.jb51.cc/vue/33599.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐