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. 運行項目查看結果