标签：About vue cli elementui 按钮 element import Home

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. 运行项目查看结果

       

       

       

标签：About,vue,cli,elementui,按钮,element,import,Home
来源： https://www.cnblogs.com/wangrongwen/p/13620269.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。