vue整合elementUI

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代替