目录
认识vue-admin-template的目录 /* vue-element-admin */
1. Vue是什么
1.1_web里_渐进式
HTML能写网页, CSS能让网页更好看, JS赋予网页交互效果, jQ写的更快, node可以提供动态数据
1.2_Vue里_渐进式
1.3_库和框架
总结:
2. @vue/cli和脚手架介绍
2.1_脚手架好处
2.1_@vue/cli安装
⚫ 查看是否成功
2.2_@vue/cli 创建项目
1. 创建项目
注意: 项目名不能有大写字母, 中文和特殊符号
2. 选择模板和包管理器
上下箭头选择 , 点击 Enter 确定
空格选中 状态, 点击 Enter 下一步
2.3_@vue/cli 启动开发服务
1. cd进入项目下, 启动内置的webpack本地热更新开发服务器 – 浏览项目页面
2. 如果未自动弹出浏览器, 手动打开输入提示的域名+端口浏览项目页面
2.4_@vue/cli 目录和代码分析
认识vue-admin-template的目录 /* vue-element-admin */
本项目已经生成了一个基本的开发框架，提供了涵盖中后台开发的各类功能和现成目录，下面是整个项目的目录结构
├── build # 构建相关
├── mock # 项目mock 模拟数据，在接口服务器没有就绪时，临时充当接口
├── public # 静态资源
│ ├── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源 不会参与打包 直接直出
│ ├── components # 全局公用组件 和业务不相关 上传组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout 负责搭建项目的整体架子结构 html结构
│ ├── router # 路由
│ ├── store # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法 request.js
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面 路由级别的组件
│ ├── App.vue # 入口页面 根组件
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintignore # eslint 忽略文件
├── .eslintrc.js # eslint 配置项
├── .gitignore # git 忽略文件
├── .travis.yml # 自动化CI配置
├── .babel.config.js # babel-loader 配置
├── jest.config.js # 测试配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
src目录：在做项目时，最关注的就是src目录, 里面是所有的源代码和资源
非src目录：一般都是对项目的环境和工具的配置
认识src目录熟悉项目的运行机制
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
整体运行方式
重点文件
main.js 是整个项目的入口文件
App.vue 是根组件
permission.js 是控制页面登录权限的文件，在main.js中引入了它。
settings.js
对于一些项目信息的配置，里面有三个属性 title(项目名称)，fixedHeader（固定头部），sidebarLogo（显示左侧菜单logo）
Vuex 当前的Vuex结构采用了模块形式进行管理共享状态，其架构如下
store/modules/user.js
export default {
namespaced: true,
state: {},
mutations: {},
actions: {}
}
scss 该项目还使用了scss作为css的扩展语言，在styles目录下，我们可以发现scss的相关文件
icons 图标字体使用，icons的结构如下
脚手架里主要文件和作用?
1. node_modules –都是下载的第三方包
2. public/index.html –浏览器运行的网页
2.5_项目架构了解
main.js和App.vue, 以及index.html作用和关系?
2.6_@vue/cli 自定义配置
目标：项目中没有webpack.config.js文件，因为Vue脚手架项目用的vue.config.js
2.8_单vue文件讲解
