新启vue_cli项目+引入Element

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

[1]安装vue_cli

vue init webpack 项目名字

[2]安装Element-UI

cnpm install element-ui -S //写入dependencies
cnpm install element-ui -D //写入devDependenciescnpm 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">



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


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