输入命令"path"检查Node.js版本在命令窗口输入:npminstall-gcnpm–registry=https:/ ; 更新日期:2024/11/8,互联网资源,高清电影,韩剧美剧,动漫资讯,游戏教程,序列号,破解版,注册机,绿色版,教程网,王者荣耀,SEO教程,网络教程,运营推广,下载中心,破解软件,游戏软件,网站源码,易语言源码,安卓软件,QQ软件,汉化版,无损音乐,MKV,WAV+CUE,FLAC,HQCD,MP3,SACD,DSD,抖音,4K高清,320k,度盘,百度云盘,蓝奏,微云盘,网盘,无广告纯净版,不限速下载,去广告,VIP解析,34" />
网络编程 
首页 > 网络编程 > 浏览文章

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

(编辑:jimmy 日期: 2024/11/8 浏览:3 次 )

一、安装npm镜像

(1)下载node.js, 配置node.js的环境变量

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

检查Node.js版本

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

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

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

二、安装全局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

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

五、需要安装的环境

(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)

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

(2)首页Home.vue

<template>
	<el-row class="container">
		<el-col :span="24" class="header">
		 <el-col :span="20" class="logo">
		  <img src="/UploadFiles/2021-04-02/logo4.png">

(3)App.vue

搭建element-ui的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; 界面渲染如下:

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

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

上一篇:angular基于ng-alain定义自己的select组件示例
下一篇:Nodejs模块载入运行原理
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap