创建vue项目流程
创建vue项目流程
1.使用构建工具vue-cli创建项目脚手架
vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目。
（1）安装
确认已安装了node.js，可在cmd中输入( node -v和npm -v），如显示出版号，说明安装成功。
-
通过
vue ui安装
第一步：在cmd中输入vue ui
图片.png
第二步：之后会弹出一个页面，点击创建
图片.png
第三步：选择你项目要放的文件，然后点击在此创建新项目
图片.png
第四步：输入项目名称，点击下一步
图片.png
第五步：选择手动，点击下一步
图片.png
第六步：根据项目需要勾选，本项目勾选了以下几个，勾选完后点击下一步
图片.png
图片.png
第七步：勾选router，本项目css选择stylus，然后点击创建项目
图片.png
第八步：点击创建项目不保存预设
图片.png
第九步：耐心等待一段时间
图片.png
第十步：安装好后，进入到项目目录下，输入npm run serve运行，若出现最后一张图的页面，说明安装成功
图片.png
图片.png
图片.png
图片.png
2.项目目录详解及各文件规范
（1）组件components
2.1.1 什么是组件
组件系统是vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
2.1.2 编写格式
（2）页面views
2.2.1如何在页面中引用组件
v-bond(:）用于设置HTML属性
v-on（@）用于绑定HTML事件
-
设置HTML属性
components中的文件（子组件）
image.png
views中的文件（父组件），对组件进行挂载
-
@设置HTML事件
components中的文件（子组件）
image.png
views中的文件（父组件），对组件进行挂载
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只允许向外暴露一次）
图片.png
如何使用
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;}
-
基本概念
图片.png - 容器的属性
flex-direction(决定主轴的方向）
【1】 主轴为水平方向，起点在左端
图片.png
图片.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进行写
image.png -
当你新建vue文件，输入vuem
image.png -
单击回车
image.png
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('方法名')
图片.png
在counter.vue文件中
图片.png
2.getters包装数据
图片.png
4.5 axios向后台发送请求（get、post）
官方文档：https://www.kancloud.cn/yunye/axios/234845
4.5.1 安装axios
npm 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文件夹放到服务器就行了。
详细可参考舞侯大神写的：
作者：木子明_
链接：https://www.jianshu.com/p/0ae3e3bb3082
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
