码迷,mamicode.com
首页 > 其他好文 > 详细

vue项目开发流程

时间:2020-03-27 17:17:04      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:官方   e30   成功   nta   字体样式   五步   es6语法   流程   前端   

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

vue项目开发流程

标签:官方   e30   成功   nta   字体样式   五步   es6语法   流程   前端   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!