版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/daily886/article/details/81449689
Vue2+VueRouter2+webpack+Axios 构建项目实战目录以及文件结构
Element-ui,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
官网 http://element-cn.eleme.io/#/zh-CN/component/installation
切换到项目根目录,运行npm安装
npm i element-ui -D
vue中使用
修改路由 src/router/index.js 的代码
import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import HelloWorld from '@/components/HelloWorld'
import Element from '@/components/Element'
Vue.use(Router)
Vue.use(ElementUI)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/element',
component: Element
}
]
})
添加视图组件 src/components/Element.vue
<template>
<div>
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world" >
<p>Try Element</p>
</el-dialog>
</div>
</template>
<script>
export default {
data () {
return { visible: false }
}
}
</script>
运行 npm run dev 命令开启服务器
浏览器上输入: http://localhost:8081/#/element ,效果如下