新启vue_cli项目+引入Element

[1]安装vue_cli

vue init webpack 项目名字

[2]安装Element-UI

cnpm install element-ui -S    //写入dependencies
cnpm install element-ui -D    //写入devDependencies

cnpm install axios -S
cnpm install vue-axios -S

[3]在项目main.js文件中引用组件

//引入Element-UI
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

//引入Axios

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

[4]在组件中引用组件

<template>
<homeContent></homeContent>
</template>

<script>
import menuLeft from './homeContent.vue'

export default {
components: { menuLeft, menuTop, homeContent }
}
</script>

[5]在项目index.js文件中配置路由

//安装
cnpm install vue-router -D

//引入（在main.js里面）
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//使用
<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <!-- 1.使用 router-link 组件来导航. -->
        <!-- 2.通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <!-- 3.设置路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>

//配置路由（router.js）
//如果单独配置路由，
//则在main.js中import引入router并使用router
//在router.js中引入VueRouter并使用

 

 

 

 

 

相关博文：https://www.cnblogs.com/wangenbo/p/8487764.html

相关博文：https://blog.csdn.net/qq_34645412/article/details/78969279