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 defaultexport向外暴露成员(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文件夹放到服务器就行了。

原文地址:https://www.cnblogs.com/tt-ff/p/12582357.html

时间: 2024-10-01 07:49:04

vue项目开发流程的相关文章

vue项目开发流程(一)

vue的环境配置好之后,让项目运行起来,一般是localhost:8080,如果是移动端,想在手机上查看效果,可以用电脑ip连接访问 1.打开控制台查看本机ip,输入命令:ipconfig 2.修改项目config文件夹下的index.js host: 'localhost' port: 8080, 这两项修改,localhost替换为本机ip地址,端口随意,最好不用8080 3.npm run dev 让项目跑起来,运行成功就可以查看了 如: Your application is runni

Vue - 项目开发

Vue项目开发 环境 1)安装node:官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2)安装cnpm >:npm install -g cnpm --registry=https://registry.npm.taobao.org 3)安装脚手架 >:cnpm install -g @vue/cli 4)清空缓存处理(如果第2.3补出问题可以执行该条命令) >:npm cache clean --force 创建项目 >: cd 项目目录 >

项目开发流程

项目开发流程:1. 需求部门-外包公司的叫法   (产品部门) 一般在做自己的产品才有   外包公司: 1.分为产品外包,人家公司要做一个系统,外包公司接过来做  需求部门:了解客户的需求,整理成需求文档   2.人才外包 2.技术部 架构师或者技术经理(项目经理)将需求部门的需求文档分析以后形成一个系统的需求分析文档 将功能细化 3.概要设计(架构师,技术经理) 形成数据库设计,db设计文档 定义出当前系统的各个业务模块,模块中的具体功能,以及此系统和外部对接的api 以及当前系统中各个子系统

项目开发流程,以及什么是数据分析平台,再者为什么要做数据分析平台,数据来源,数据处理流程

一:项目开发流程 1.项目调研 了解项目的初始需求,然后结合市场的技术,看一下能否完成 2.需求分析 明确一个项目到底需要做什么? 最终做出的是什么样子? 重要性:一个好的需求分析能够明确项目的后续发展主题方向 3.方案设计 概要设计: 项目结构,技术选型 详细设计: 按照模块设计 4.编码实现 具体实现 5.测试 功能测试:功能是否达到了需求 集成测试:模块之间的兼容性 压力测试:高并发,多用户下,系统是否可以运行 用户测试:根据用户的建议进行修改 6.上线 试运行阶段:新系统与老系统同时在线

外包项目开发流程规范(ODC)

    忙碌时候时间过得很快,没时间记录下工作的一些东西,以下记录外包项目开发的一些流程规范: ODC软件系统开发流程: 例行版本:1.需求分析(用户.ODC) 1)找用户谈需求 2)确定系统上线时间.移交用户测试时间2.工作量的估算(ODC) 1)各个功能点需要的人天(初步估算,后续需求有改动,需要重新更新)3.工作计划安排(ODC) 1)开发计划-指定哪个功能由哪个开发人员进行开发,什么时候开发完成(移交系统测试) 2)测试计划-几时移交系统测试.几时移交用户测试4.系统开发及自测(ODC)

小型软件项目开发流程探讨

一.导言 国内很多项目都是小型项目, 参与人员少(两到五个人), 要快速交付(一两个月) . 要成功完成这种项目, 除了使用成熟且被团队成员熟练使用的技术之外, 有一个良好的开发流程, 也是很必要的. 二.小型软件项目开发流程 下图是我对小型软件项目开发流程的一个设想: 需求分析的重要性想必大家都应该清楚, 对于项目来说, 满足用户的需求是第一位的. 因为时间紧, 系统设计经常被忽略. 这会留下很大的隐患, 国内很多项目的需求通常是很简略的, 还需要在系统设计阶段把一些需求进一步的明确. 不然会

使用.NET MVC框架项目开发流程(项目开发流程)

MVC项目开发流程 整理需求,进行需求分析.项目设计. 整理数据项,建数据库做前期准备,并整理字典. 建立所需数据库表和视图和模型. 页面实现其初步功能(跳过逻辑后台代码),只是实现页面之间的跳转以及展示(预览审核使用). .............................................................................................................................. 审核通过……开始写数据

Unity3D游戏开发之虚拟现实项目开发流程

Unity3D游戏开发之虚拟现实项目开发流程 欢迎来到unity学习.unity培训.unity企业培训教育专区,这里有很多U3D资源.U3D培训视频.U3D教程.U3D常见问题.U3D项目源码,[狗刨学习网]unity极致学院,致力于打造业内unity3d培训.学习第一品牌. 一.系统设计与资料的收集与整理 1.              与项目投资单位沟通并进行系统设计: 2.              收集整理规划图.效果图.现场照片: 3.              拍摄比干文化及景区介

K2项目开发流程

(自己的学习资料) K2项目开发流程: 1.在VS2013中设计流程,并在K2 Workspce中测试流程 首先是新建新建一个k2的Process文件..kprx后缀. 在里面创建所需要的流程.由于我是初学者,创建工作流时审批人都先指向自己,易于实现. 审批人有两种方法指向,一指向特定的人,二根据数据库中的人. 在工作流创建完成之后.打开k2 workspace里面的workflow server.里面是一些已存在的工作流.点开来找到instances选中节点,点击start进行工作流的测试.