知识点12--在vuecli项目的基础上用npm方式使用element ui

知识点11中介绍了如何使用vuecli搭建项目，那么本章知识点为大家介绍如何在vuecli搭建的项目中使用npm下的element ui

不要在vuecli项目中，如普通html项目中那样直接引用官方路径使用element ui，两种方式是不一样不相互通用

第一步：你需要在那个项目中cmd窗口下，切换到项目路径下

第二步：在项目路径下使用局部安装命令为当前项目安装element ui

第三步：下载完成后，你就可以在项目的package.json配置文件中看到element ui的版本信息了

第四步：在项目的main.js文件中加入如下代码，引入完整的element ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI)

除了全部引用，你也可以单个的引用，见官网

这时你就可以正常使用了，借此机会也给大家演示一下如何开发一个vuecli项目的页面

第一步：在views路径下，创建一个自定义的vue后缀文件，你如果用的是Hbuilder会有模板的，我这里文件名为users

<template><div><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}}
</script><style>
</style>

上面的这个代码，js部分就不像知识点10里面那样只cv了数据部分，而是全部cv过来了，这个是固定的格式

第二步：在src/router/index.js下注册你的路径，其实人家自带的代码中已经给你示范了两种写法，我们随便用一种改成自己的就行

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path: '/users',name: 'users',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/users.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

第三步：我们就不另外建首页了，沿用自带的App.js，在其中导航栏部分写入自己的标签

<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |<router-link to="/users">user</router-link></nav><router-view/></div>
</template>

第四步：如果你用的是Hbuilder那就不需要，但如果你用的是其他的工具那就需要看一下是否重启项目，Hbuilder会给你自动重启项目，重启后浏览器访问首页，点击user选项

这就是在vuecli项目中自己写代码的方式

知识点12--在vuecli项目的基础上用npm方式使用element ui相关推荐

弹性容器----六大属性（5、项目在交叉轴上的对齐方式）
弹性容器----六大属性(5.项目在交叉轴上的对齐方式) align-items属性定义项目在交叉轴(纵轴|侧轴)上如何对齐. 语法: .box {align-items: flex-start | ...
vue-cli项目配置文件分析
最近在vue-cli生成的webpack模板项目的基础上开发了一些项目,开发过程中遇到很多坑,并且需要改动build和config里面一些相关的配置,查阅,学习,总结,分享. 一.配置文件结构本文主 ...
php和ui,php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 3.页面内使用 1) 容器需要增加id属性 2) 添加script标签,创造vue组件 var app = new Vue ...
elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...
elementui中同时上传多个文件_element ui 上传文件，批量一次上传多个文件，为什么是发送了多次请求，我想一次请求，然后发送多个文件怎么实现呢？...
想要的效果是用户一次选择的文件一个接口上传完毕,但是element ui 里面是上传了多次一次一个文件的形式上传的为4参数的接口调用了多次执行的上传,我想上传一次多个文件的怎么实现呢? 因为 ...
vue+element ui完成头像上传功能（文件转base64）以及自定义布局。
1.自定义布局查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: ...
python分布式框架celery项目开发_本项目在 Celery 分布式爬虫的基础上构建监控方案 Demo...
CrawlerMonitor UPDATE: 2020.4.14 Introduction 本项目在 Celery 分布式爬虫的基础上构建监控方案 Demo,在编写 Statsd + InfluxDB ...
Android开源项目大合集（转载的基础上添加了项目地址）
WeChat高仿微信项目地址:https://github.com/motianhuo/wechat 高仿微信,实现功能有: 好友之间文字聊天,表情,视频通话,语音,语音电话,发送文件等. 知乎专栏 ...
前端css基础知识点之PC端项目-规范
前端css基础知识点之PC端项目-规范 1 文件管理文件名用英文命名 css文件夹 reset.css(常用的浏览器样式) public.css(公共的样式.比如页面的头部尾部.重复使用字体.字号等 ...

知识点12--在vuecli项目的基础上用npm方式使用element ui

知识点12--在vuecli项目的基础上用npm方式使用element ui相关推荐

最新文章

热门文章