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