vue项目开发流程

创建vue项目流程

1.使用构建工具vue-cli创建项目脚手架

vue-cli是一个官方发布vue.js项目脚手架，使用vue-cli可以快速创建vue项目。
（1）安装
确认已安装了node.js，可在cmd中输入( node -v和npm -v），如显示出版号，说明安装成功。

 

图片.png

 

• 通过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.项目目录详解及各文件规范

 

 

图片.png

（1）组件components
2.1.1 什么是组件
组件系统是vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

 

2.1.2 编写格式

 

1.png

 

（2）页面views
2.2.1如何在页面中引用组件
v-bond(:）用于设置HTML属性
v-on（@）用于绑定HTML事件

• 设置HTML属性
  components中的文件（子组件）

  
  
   

  

  image.png

views中的文件（父组件），对组件进行挂载

 

image.png

• @设置HTML事件
  components中的文件（子组件）

  
  
   

  

  image.png

views中的文件（父组件），对组件进行挂载

 

image.png

2.2.2编写格式

 

2019-07-28_195422.png

 

（3）路由router

（4）配置文件package.json介绍

 

图片.png

 

---

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只允许向外暴露一次）
  
   

  

  图片.png
  
  如何使用
  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;}

• 基本概念

  
  
   

  

  图片.png
• 容器的属性
  flex-direction(决定主轴的方向）
  【1】 主轴为水平方向，起点在左端
  
   

  

  图片.png
  
  
   

  

  图片.png

【2】主轴为水平方向，起点在右端

 

图片.png

 

图片.png

【3】主轴为垂直方向，起点在上沿

 

图片.png

 

图片.png

【4】主轴为垂直方向，起点在下沿

 

图片.png

 

图片.png

flex-wrap(一条轴线拍不下进行换行）

 

图片.png

【1】不换行

 

图片.png

 

图片.png

【2】第一行在上面

 

图片.png

 

图片.png

【3】第一行在下面

 

图片.png

 

图片.png

 

** flew-flow（flex-direction属性和flex-wrap属性的简写形式）**
** justify-content（项目在主轴上的对齐方式）**
【1】 左对齐

 

图片.png

 

图片.png

【2】 右对齐

 

图片.png

 

图片.png

【3】 中间

 

图片.png

 

图片.png

【4】 两端对齐

 

图片.png

 

图片.png

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(左边距)

 

图片.png

 

---

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中，方便整个程序中的任何组件直接获取或修改我们的公共数据。

 

图片.png

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的作用如下图：

 

图片.png

（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配置如下：

 

图片.png

 

图片.png

注：

 

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文件
例：

 

2.png

---

5.打包上线部署

项目开发完成后，可以输入npm run build来进行打包工作（打包目的为了压缩文件大小）
然后会生成一个dist的文件夹，项目上线时，只需要将dist文件夹放到服务器就行了。