初识系统框架

一、学到了

1.搭建vue框架：详见http://t.csdnimg.cn/og0Tl

2.启动vue

• cmd输入npm run dev

• idea中直接配置

3.引用element的框架（npm i element-ui -S）

4.Vue项目工程的介绍

• public：放静态文件的地方，（html、静态图标等）
• src：项目的源码目录
• src.assets：可以放一些logo、图片、自定义样式...
• src.components：vue组件（一些页面）
• src.router：定义路由，每个路由对应一个页面
• src.views：视图文件 
• App.vue：所有页面的入口（在这里对应进入布局）
• main.js：所有配置的入口，可以导入项目所需要的包，然后组合在一起
• vue.config.js：vue项目里的一些配置，可以配置端口、跨域...
• global.css：清除自带的默认样式

5.container：布局容器；快速搭建页面的基本结构（垂直上下排<el-header>,水平左右排<el-footer>）

  注：引用element开展学习

• <el-container>
• header:顶部容器
• aside：侧边框
• main：主要区域
• footer：底栏

6.引入路由：页面变化的时候URL变化

在跳转的页面的代码中设置路由名称，在index.js中设置path变量

二、错误及纠正

1.错误：引用global.css路劲错误，多打了一个src

纠正：（@/assets/global.css）

2.错误：多了一个布局容器

纠正：删除多的容器格式