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

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

 

图片.png

 

图片.png

 

图片.png

 

图片.png

 

图片.png

 

图片.png

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

 

图片.png

 

图片.png

【2】 右对齐

 

图片.png

 

图片.png

 

图片.png

 

图片.png

 

图片.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

（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文件夹放到服务器就行了。