如何用vue+element ui开发项目

vue的安装和环境配置请参考上篇博文参考上篇博文

element ui是饿了么官方推荐的一个pc端ui库，结合vue一起使用可以快速开发一个精美而功能完全的页面。

1.将创建好的项目拖拽入VScode，打开终端，安装element ui：

输入命令：npm install element-ui -S

2.在main.js中引入element ui:

添加代码：

import elementui from 'element-ui'

impot 'element-ui/lib/theme-chalk/index.css'

Vue.use(elementui)

import Vue from 'vue'
import App from './App'
import router from './router'

import elementui from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(elementui)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.在components下新建一个vue页面

将以下模板复制到新建的vue页面：


<!--基本html代码区域-->
<template>
  <div class="firstdemo">
         
  </div>
</template>


<!--数据存贮交互，事件控制地区-->
<script>
export default {
  name: 'firstdemo',
  data () {
    return {
      
    }
  },
  methods:{},
}
</script>

<!-- 写样式的地方 -->
<style scoped>

</style>

4.将新建的vue页面注册到路由管理当中：

打开router下面的Index.js文件：

作出两处修改：

import firstdemo from '@/components/firstdemo'

routes:[

{

path: '/firstdemo',

name: 'firstdemo',

component: firstdemo

}

]

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import firstdemo from '@/components/firstdemo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/firstdemo',
      name: 'firstdemo',
      component: firstdemo
    }
  ]
})

5.删除App.vue当中多余的数据：

因为index.html入口是先进入App.vue当中然后通过router来找到各个vue页面的

App.vue相当于总的vue页面的入口

将<img src="./assets/logo.png">这一行代码删除即可：

6.即可在新建的vue页面当中进行代码编写

然后通过在终端输入命令：npm run dev

用浏览器访问：

http://localhost:8080/#/firstdemo

因为在router里面设置的HelloWorld为根路径，所以得手动访问firstdemo即可。

如何用vue+element ui开发项目

猜你喜欢