一. 使用vue init webpack 项目名称初始化一个项目
使用npm install 安装依赖.可能遇到报错 - npm ERR! chromedriver@2.46.0 install: `node install.js.
解决方法:
-
npm install --ignore-scripts
-
npm i
-
npm rebuild node-sass
二.使用npm run dev 启动初始项目
三.整合element UI
- 使用命令npm i element-ui -S 添加element-ui组件
- 更改main.js文件内容引入element组件
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.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
})
四.添加一个主页
1.删除components下原来的helloworld.vue文件
2.修改App.vue里的内容:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
</script>
<style>
body {
margin:0
}
html,body,#app {
height: 100%;
}
</style>
3.在src目录下新建一个文件夹views用于我们存放页面,然后再创建一个home.vue文件,这里代码直接拷贝element-ui官网提供的页面布局 上-左-右 布局.
<template>
<div id="el">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
</div>
</template>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
.el-container,#el {
height: 100%;
}
</style>
4.在src/router/index.js中添加首页路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: '首页',
component: Home
}
]
})
5.重新执行npm install 命令和 npm run dev 命令,浏览器里输入:http://localhost:8080/#/查看首页内容.