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即可。