css全栈之巅布局,全栈之巅笔记第一部分

第一步 初始化目录和文件

(1)server

mkdir server

cd server

nodemon index.js

npm run serve

(2)web和admin

在根目录下分别npm create web和admin即可

第二步 编写admin页面

(1)安装elementui(Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库)

cd admin后vue add element记得回车默认

(2)添加路由

vue add router然后选n不要hitory模式

区别参见https://www.cnblogs.com/imgss/p/7492333.html

(3)去eui官网复制container布局容器代码

https://element.eleme.cn/#/zh-CN/component/container

点 显示代码 后全选复制

在admin的src/views(没有view文件夹就新建)里面新建Main.vue粘贴

注意要新建把全部html(不包括style也就是css部分)放进去

(4)在router.js中引用main.vue

(没有router.js的话在命令行vue add router会生成router目录里面的index.js)

添加 import Main from ‘../views/Main.vue‘

然后 name: ‘main‘, //原为home

component: Main //原为Home

(5)修改App.vue去掉不必要的只留下

并加入下面的去掉边距

再到Main.vue找到el-container里面的height:500px改为height:100vh并去掉后面的boder

原文：https://www.cnblogs.com/typh00n/p/12742602.html