创建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语法基础

http://es6.ruanyifeng.com/

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基础

https://cn.vuejs.org/

3.3 css基础

3.3.1 flex布局

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

定义：用来为盒装模型提供最大的灵活性。
弹性布局：.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的作用如下图：