vue/cli 3新建项目并引入element-ui

1. 环境
   1. vue   2.6.11
   2. vue/cli 3.11.0
   3. elementui   vue脚手架自动安装2.4.5
2. 新建项目
   1. vue create elementui
3. 引入element-ui
   1. vue add element
4. 使用

   1. 安装完成后不用手动去引入elementui,脚手架自动引入了elementui.

   2.  

      打开main.js,看下图

      

   3. 再打开App.vue,看下图

      

   4. 脚手架自动引入了elementui,并且在App.vue中做了一个例子.

   5. 运行项目就可以看到首页中多了一个elementui样式的按钮.
5. 手动使用elementui
   1. src/router/index.js中路由配置如下(项目创建完成时就这样,没有改动)

      import Vue from 'vue'
      import VueRouter from 'vue-router'
      import Home from '../views/Home.vue'
      
      Vue.use(VueRouter)
      
        const routes = [
        {
          path: '/',
          name: 'Home',
          component: Home
        },
        {
          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/About.vue')
        }
      ]
      
      const router = new VueRouter({
        mode: 'history',
        base: process.env.BASE_URL,
        routes
      })
      
      export default router

   2. App.vue代码如下(紫色为有改动部分)

      <template>
        <div id="app">
          <router-link to="/">Home</router-link>
          <router-link to="/About">About</router-link>
          <router-view></router-view>
        </div>
      </template>
      
      <script>
      import Home from './views/Home'
      import About from './views/About'
      
      export default {
        name: 'app',
        components: {
          Home,
          About
        }
      }
      </script>

       

   3. Home.vue代码如下(紫色为有改动部分)

      <template>
      <div class="home">
      <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
      </el-row>
      </div>
      </template>
      
      <script>
      // @ is an alias to /src
      
      export default {
      name: "Home",
      components: {
      }
      };
      </script>

   4. 运行项目查看结果