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

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】主轴为水平方向，起点在右端

图片.png

图片.png

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

图片.png

图片.png

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

图片.png

图片.png

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

图片.png

【1】不换行

图片.png

图片.png

【2】第一行在上面

图片.png

图片.png

【3】第一行在下面

need-to-insert-img

图片.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.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)的使用

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)

4.5.1 安装axios

npm install axios

4.5.2 api.js文件用于向后台发送请求

例：

4.6 router(路由)页面跳转

4.6.1

4.6.2 router.js文件

例：

5.打包上线部署

项目开发完成后，可以输入npm run build来进行打包工作(打包目的为了压缩文件大小)

然后会生成一个dist的文件夹，项目上线时，只需要将dist文件夹放到服务器就行了。