搭建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前端工程操作实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

相关文章

可以通过min-width属性来设置el-table-column的最小宽度。以...
yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
<el-form-item label="入库类型" ...
API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...