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

前端之家收集整理的这篇文章主要介绍了搭建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

logo"> 学校管理 {{sysUserName}} 我的消息 设置 logout">退出登录 {{item.children[0].name}}

(3)App.vue

(4)main.js

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

(5)router.js

八、完成之后,npm run dev; 界面渲染如下:

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

原文链接:https://www.f2er.com/vue/33599.html

猜你在找的Vue相关文章