[1]安装vue_cli

vue init webpack 项目名字

[2]安装Element-UI

cnpm install element-ui -S    //写入dependencies
cnpm install element-ui -D //写入devDependencies cnpm install axios -S
cnpm install vue-axios -S

[3]在项目main.js文件中引用组件

//引入Element-UI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
//引入Axios
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)

[4]在组件中引用组件

<template>
<homeContent></homeContent>
</template> <script>
import menuLeft from './homeContent.vue' export default {
components: { menuLeft, menuTop, homeContent }
}
</script>

[5]在项目index.js文件中配置路由

//安装
cnpm install vue-router -D //引入(在main.js里面)
import VueRouter from 'vue-router';
Vue.use(VueRouter); //使用
<template>
<div id="app">
<v-header></v-header>
<div class="tab">
<div class="tab-item">
<!-- .使用 router-link 组件来导航. -->
<!-- .通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foods">商品</router-link>
</div>
<div class="tab-item">
<router-link to="/ratings">评论</router-link>
</div>
<div class="tab-item">
<router-link to="/seller">商家</router-link>
</div>
</div>
<!-- .设置路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div> //配置路由(router.js)
//如果单独配置路由,
//则在main.js中import引入router并使用router
//在router.js中引入VueRouter并使用

相关博文:https://www.cnblogs.com/wangenbo/p/8487764.html

相关博文:https://blog.csdn.net/qq_34645412/article/details/78969279

新启vue_cli项目+引入Element的更多相关文章

  1. vue项目引入element

    前提工作-安装并配置好以下环境: 1.安装node  2.安装git 1.初始化项目 vue init webpack vue-elementui npm run dev 2.安装element np ...

  2. 新项目引入gulp

    1:安装npm:官网下载nodejs--https://nodejs.org/en/.进行安装npm;--http://jingyan.baidu.com/article/a17d528506d7f5 ...

  3. vue2.0项目引入element-ui

    在项目中,为了方便我们工作和开发效率,常常引入一些框架来帮助我们完成高效的工作,今天我们就用vue来搭建一下框架,并且引入element-ui这个框架.安装流程也是我从失败中摸索到的,希望能帮助大家. ...

  4. Android:认识R类、findViewById方法查找组件、@string查找字符、@color查找颜色、@drawable查找图片、@dimen某个组件尺寸定义、项目引入资源国际化

    导入 之前都是断断续续的看了一些于如何使用android开发的文章.资料等,到目前位置很多基础的东西都不清楚,于是去学习了别人的课程,才了认识了R类.findViewById方法查找组件.项目引入资源 ...

  5. Flutter 即学即用系列博客——03 在旧有项目引入 Flutter

    前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...

  6. Maven项目引入log4j的详细配置

    注:本文来源于 _xiaoxiong  <Maven项目引入log4j的详细配置> 引入log4j pom.xml <dependency> <groupId>lo ...

  7. web项目引入extjs小例子

    一个新的项目,前端用extjs实现!分享一下extjs开发的准备工作! 首先去下载extjs的资源包,这里我是随便在网上下载的! 打开之后 ,目录是这样的! 需要关注的几个文件夹: builds:压缩 ...

  8. vue-cli脚手架引入element UI的正确打开方式

    element UI官网教程:http://element-cn.eleme.io/#/zh-CN/component/quickstart 1.完整引入,直接了当,但是组件文件不是按需加载,造成多余 ...

  9. [转帖]中信银行信用卡业务数据库实现国产替换,湖北银行新核心系统项目正式验收,阿里云与MongoDB达成战略合作

    中信银行信用卡业务数据库实现国产替换,湖北银行新核心系统项目正式验收,阿里云与MongoDB达成战略合作 http://www.itpub.net/2019/10/31/3942/ 中信银行 gold ...

随机推荐

  1. mysql中重复数据只取条

    select * from table_a where id in (select min(id) from table_a group by a) )) SUBSTRING_INDEX(cids,' ...

  2. Android开发 View_自定义圆环进度条View

    前言 一个实现,空心圆环的自定义View,已经封装完好,可以直接使用. 效果图 代码 import android.content.Context; import android.graphics.C ...

  3. [JZOJ3302] 【集训队互测2013】供电网络

    题目 题目大意 给你一个有向图,每个点开始有一定的水量(可能为负数),可以通过边流到其它点. 每条边的流量是有上下界的. 每个点的水量可以增加或减少(从外界补充或泄出到外界),但是需要费用,和增加(减 ...

  4. 【JZOJ6370】基础 fake 练习题

    description 装饰者坐在树荫下听着长者讲述以前的故事: 大神 yk 非常喜欢树,便钦点班里的 n 个小蒟蒻站在一棵 n 个点以 1 为根的树上,并且每个点上恰好有 1 个小蒟蒻. 大神 yk ...

  5. Kunbernetes从私有仓库nexus拉取镜像

    1.docker登陆认证 [root@master ~]# vim /etc/docker/daemon.json { "insecure-registries": [" ...

  6. Map按键排序(sort by key)

    1.需求:已知有如下map,要求按照key倒序排列遍历. Map<String, Integer> map = new HashMap<>(); map.put("1 ...

  7. mysql 函数和存储过程的区别

    >一般来说,存储过程实现的功能要复杂一点,而函数的实现的功能针对性比较强.存储过程,功能强大,可以执行包括修改表等一系列数据库操作:用户定义函数不能用于执行一组修改全局数据库状态的操作. > ...

  8. (转)java源程序加密解决方案(基于Classloader解密)

    转:http://cjnetwork.iteye.com/blog/851544 源程序加密解决方案 1. 概述: Java源程序的加密,有如下两种: 1使用混淆器对源码进行混淆,降低反编译工具的作用 ...

  9. MySql查询分页数据

    MySql查询分页数据

  10. 从 i++ 和 ++i 说起局部变量表和操作数栈

    本文转载自:从 i++ 和 ++i 说起局部变量表和操作数栈 最近公司有人看了尚硅谷柴林燕老师的第一季面试题,就想来考考我.我觉得柴老师讲的很好,部分内容可以延伸一下,所以写这篇文章分享给大家! 这篇 ...