创建vue项目的基本流程
1.使用构建工具vue-cli创建项目脚手架
vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目。
（1）安装
确认已安装了node.js，可在cmd中输入( node -v和npm -v），如显示出版号，说明安装成功。
- 通过
vue ui安装
第一步：在cmd中输入vue ui
第二步：之后会弹出一个页面，点击创建
- 第三步：选择你项目要放的文件，然后点击在此创建新项目
- 第四步：输入项目名称，点击下一步
- 第五步：选择手动，点击下一步
- 第六步：根据项目需要勾选，本项目勾选了以下几个，勾选完后点击下一步
- 第七步：勾选router，本项目css选择stylus，然后点击创建项目
- 第八步：点击创建项目不保存预设
- 第九步：耐心等待一段时间
-
第十步：安装好后，进入到项目目录下，输入
npm run serve运行，若出现最后一张图的页面，说明安装成功
2.项目目录详解及各文件规范
（1）组件components
2.1.1 什么是组件
组件系统是vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
2.1.2 编写格式
（2）页面views
2.2.1如何在页面中引用组件
v-bond(:）用于设置HTML属性
v-on（@）用于绑定HTML事件
- 设置HTML属性
components中的文件（子组件）
views中的文件（父组件），对组件进行挂载
- @设置HTML事件
components中的文件（子组件）
views中的文件（父组件），对组件进行挂载
image.png
2.2.2编写格式
（3）路由router
（4）配置文件package.json介绍
3.项目所需知识
3.1 ES6语法基础
3.1.1 let和const、字符串、解构赋值、数组、函数
3.1.2 export default和export的使用方式
- 导入模块：使用import模块名称from模块标识符（import表示路径）
- 暴露成员方式：使用export default和export向外暴露成员（exfault default只允许向外暴露一次）
如何使用
import+（常量/函数/文件/模块）的方式导入，以便能够进行使用。
export和export default均可用于导出常量、函数、文件、模块等。
export和export default的区别
图片.png
3.2 vue基础
3.3 css基础
3.3.1 flex布局
定义：用来为盒装模型提供最大的灵活性。
弹性布局：.box{ display:flex;}
webkit内核的浏览器：.box{ display: -webkit-flex; display:flex;}
- 基本概念
- 容器的属性
flex-direction(决定主轴的方向）
【1】 主轴为水平方向，起点在左端
图片.png
【2】主轴为水平方向，起点在右端
【3】主轴为垂直方向，起点在上沿
【4】主轴为垂直方向，起点在下沿
flex-wrap(一条轴线拍不下进行换行）
【1】不换行
【2】第一行在上面
【3】第一行在下面
** flew-flow（flex-direction属性和flex-wrap属性的简写形式）**
** justify-content（项目在主轴上的对齐方式）**
【1】 左对齐
【2】 右对齐
【3】 中间
【4】 两端对齐
align-items(交叉轴上如何对齐）
align-content（多根轴线的对齐方式）
3.3.2常用的几个样式
字体样式：font-family（字体的名称） font-weight(字体的粗细） font-size(字体的大小）
字体和框：text-align（文字相对于框的位置） line-height(设置行高）
margin和padding:margin: 25px(上边距） 50px(右边距） 75px(下边距) 100px(左边距) auto(依赖于浏览器）; padding：25px(上边距） 50px(右边距） 75px(下边距) 100px(左边距)
4.项目开发
4.1 和UI打交道
前端自然少不了和UI打交道，UI常用的工具有PS和蓝湖（https://lanhuapp.com/）
4.2 代码管理工具git
4.2.1 教程：https://www.liaoxuefeng.com/wiki/896043488029600
4.2.2 常用命令：
远程拉取项目：git clone 地址
状态：git status
添加：git add .
提交：git commit -m " "
推送：git push
查看远程仓库：git remote -v
推到master上：git push origin master
创建新的分支(分支名：dev）：git checkout -b dev
新建分支合并到master：git checkout master git marge dev git push origin master
删除分支：git branch -D dev
远程删除分支：git push origin :dev
退回到上一个版本：git reset --hard head^
查看日志：git log 或者 git reflog
4.3 编辑器vscode的使用
4.3.1封装代码块
在vscode的文件>首选项>用户代码片段
- 比如说要封装vue代码片段，输入vue在vue.json进行写
- 当你新建vue文件，输入vuem
- 单击回车
4.3.2常用命令
4.4 状态管理（vuex）的使用
官方文档：https://vuex.vuejs.org/zh/ 学习笔记：https://www.jianshu.com/p/9c42da470943
4.4.1什么是vuex？
是vue配套的公共数据管理工具，它可以把一些共享的数据，保存到vuex中，方便整个程序中的任何组件直接获取或修改我们的公共数据。
4.4.2安装vuex
npm install vuex --save
在一个模块化的打包系统中，必须显式地通过Vue.use()来安装Vuex：
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)
4.4.3.状态管理核心
状态管理有5个核心，分别是state、mutation、getter、action、module
（1）state
简单的理解，可以把state想象成组件中的data，专门用来存储数据的。
如果在组件中，想要访问store中的数据，只能通过```this.$store.state.xxx来访问
（2）mutation
负责修改state中的数据
如果要操作store中的state值，不推荐直接操作state中的数据，推荐通过调用mutations提供的方法来操作对应的数据。mutation的作用如下图：
（3）getter
只负责对外提供数据，不负责修改数据
（4）action
action和mutation有些类似，不同在于
- action提交是不能直接修改state中的状态，而mutation是可以直接修改state中的状态。
- action是支持异步操作的，而mutation只能是同步操作。
（5）mudule
module解决了当state复杂臃肿的时候，module可以将store分割成模块，每个模块拥有直接的state、mutation、action和getter。
4.4.4 在main.js文件中或者store.js配置如下：
注：
1.如果在组件中，想要访问store中的数据，只能通过
this.$store.state.xxx来访问。
或者如果组件想要调用mutations中的方法，只能使用this.$store.commit('方法名')
在counter.vue文件中
2.getters包装数据
4.5 axios向后台发送请求（get、post）
官方文档：https://www.kancloud.cn/yunye/axios/234845
4.5.1 安装axiosnpm install axios
4.5.2 api.js文件用于向后台发送请求
例：
4.6 router（路由）页面跳转
官方文档：https://router.vuejs.org/zh/ 4.6.1
4.6.2 router.js文件
例：
5.打包上线部署
项目开发完成后，可以输入npm run build来进行打包工作（打包目的为了压缩文件大小）
然后会生成一个dist的文件夹，项目上线时，只需要将dist文件夹放到服务器就行了。
