创建 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 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
[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 代码管理工具
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 常用命令
5. 打包上线部署
项目开发完成后, 可以输入 NPM run build 来进行打包工作 (打包目的为了压缩文件大小)
然后会生成一个 dist 的文件夹, 项目上线时, 只需要将 dist 文件夹放到服务器就行了.
详细可参考舞侯大神写的:
https://www.jianshu.com/p/8792560f1a24
来源: http://www.jianshu.com/p/0ae3e3bb3082