Vue整合elementUI
壹
-
安装node.js
-
安装vue和vue-cli
cnpm install vue cnpm install vue-cli -g
-
初始化vue-cli
vue init webpack
是否安装eslint语法检查以及单元测试根据自己的需求而定
- 在终端运行安装命令
npm i element-ui -S
初始化后的目录结构如图:
- 运行下试试看
npm run dev
- 至此,搭建完成
运行element-ui组件
-
main.js文件中添加如下代码
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
-
去element官网查找适合的组件代码,粘贴进新创建的vue文件中
<template> <el-calendar v-model="value"> </el-calendar> </template> <script> export default { data() { return { value: new Date() } } } </script>
-
在路由中添加配置
import test from '@/views/test'
{
path:'/test',
name:"test",
component:test
}
- 运行尝试
npm run dev
叁
npm向yarn迁移
npm install -g yarn
详情请见官方文档:点击
npm run dev 可用 yarn run dev代替