Vue项目 重点

Vue项目 重点

01 vue-cli创建项目结构

1. 来到项目所希望的目录 -》打开cmd

2. vue init webpack 项目名

3. 1. 是否安装vue-rou
   3. ter -> Y
   4. 是否use ESlint ->Y
   5. 编译方式 -> for most users ->
   6. unit tests -> N
   7. e2e -> N
   8. NPM/yarn -> npm

4. cd 项目目录

5. npm run dev 启动开发模式

   注意 默认不会自动打开浏览器
   '1电商后台管理'

02 项目目录说明

1. esllintgnore 代码规范检测忽略文件
2. gitignore git版本控制忽略文件
3. eslintrc 代码规范配置
4. babelrc ES6降级
5. static .gitkeep 可以管理项目里面的空文件夹了
6. build webacpk 把src 打包处理会形成对应文件
7. Pick an ESLint preset 代码规范 【Standard/每行末尾必须没有分号； Airbnb/每行末尾必须有分号】
8. config 配置服务器
   1. dev.env.js
   2. index.js 开发服务器 autoOpenBrowser:true 启动服务器后自动打开浏览器
   3. prod.env.js 生产服务器
9. src
   1. src/main.js 和之前不一样的是render 现在是template 和components
10. package.json---scripts 里面可以写自定义指令

03 自定义指令 - lintfix

ESlint 自定检查js代码规范

一键调整diam规范

1. 在 package.json 》 scripts 自定义指令
2. ‘lintfix' : 'eslint --ext.js , .vue src --fix',
3. npm run dev
4. npm run lintfix 修复错误，但是未使用的变量不能使用 [ package.json ---> "lintfix":"eslint --ext .js,.vue src --fix", ]
5. npm run dev

建议： ESlint使用，项目第三天 会学如何禁用eslint

04 element-ui-文档分析

vue 使用第三方Ui库 饿了么 element-ui

vuePC项目： element-ui / iView

vue 移动端项目：mint-ui

05 element-ui 安装 引入

main.js

在所有的.vue文件template中就可以使用组件了

06 模板简化 调整

简化代码

07 git版本控制

git管理项目代码

gitbash -》 git 指令可以在任何cmd中执行 -》 git报错-》git是无效指令

1. 找到git软件安装路径bin
2. 找到计算机管理/属性/环境变量path - 》 修改path -》把上一步路径放在path里面
3. 可以在任意cmdgit指令
4. 重启电脑

初次使用git

git init
git add .     放在暂存区   
git commit -m '注释内容'     把暂存区放到仓库
// github新建仓库 登录github  》右上角 加号 》
//关联仓库

git push -u origin master 从本地 推送到仓库

后续使用git

git add . 
git comit -m '注释修改内容'
git push

08 git 分支管理

前提git管理代码/协同开发

项目多人

A 》 新建子分支login 》 编写代码 》 git add.commit 》 把代码A合并到主分支master

B 》 新建子分支home 》 编写代码 》 git add.commit 》 把代码B合并到主分支master

git branch   检测所有分支
git checkout -b dev-login  创建分支并且切换到该分支
git branch 结果：接下来所有的操作 在当前的dev-login 进行操作的 --》 开发login功能

09 login组件- 配置路由

当前开发login登录当前分支dev-login

1. 新建login.vue组件

2. 配置路由router.js
   //在子分支完成小功能后 ，在自分支上
   git add .
   git commit -m '注释'
   //功能完成

   git checkout master   //切换到master
   //git branch          //查看现在的分支是哪个分支
   git merge dev-login   //把dev-long 合并到master主分支
   // 在master 主分支推送
   git push
   

10 登录-引入表单组件

切换回 dev-login

1. 引入el-form

2. 添加类名

3. 提供组件要用的数据

   git branch
   git status
   git add .
   git commit -m '引入 登录组件'

合并代码 不需要每次都做，可以完成一大功能 最后一期合并和推送

11 登录-样式调整

1. 百分比布局
   1. base.css html ,body{height:100%}
   2. App.vue #app{height:100%}
2. vue项目重点不是样式调整,只要能写出来就行了

12 登录- axios 插件

import axios from 'axios'
axios.defaults.baseURL=''
Vue.protoyepe.$http = axios

1. npm i axios
2. main.js 挂载
3. this.$http发送请求了

13 登录-发送登录请求

服务器cmd卡死 --> 回车--> 激活它

14 登录- 引入提示框组件

在element-ui里面找到消息提示

提示: 对象结构赋值

15 登录- 登录成功-进入home组件

登录成功 -》 渲染home.vue

16 登录-简化登录请求代码-saync和await

目的：让异步代码看起来像同步，好处没有函数嵌套

const res = await this.$http.post(`login`,this.formdata);

1. 找异步代码
2. 的
3. 在异步代码外层最近的函数前面加async

17 登录-保存token值

将来在其他组件中使用用户的数据信息中token 数据 》 保存token -》

login.vue 有了token -> xxx.vue 使用token ->

A页面有数据a -> B页面使用a ->

要把token数据永久储存 【登录成功后的一个值】

cookie 储存几K的数据

session

sessionStorange 会话存储

localStorage 存储在本地

//把正确的用户token保存起来
//存值
localStorage.setItem("token",token)

18 登录-首页布局-使用-样式调整

19 登录-首页- 头部-样式调整

引入layout布局（24份）

el-row 一行

el -cl 一列

20 合并代码

子分支
git add .
git commit -m ''

切到主分支
git checkout master 

合并代码
git merge dev-login
 
在master 写代码
git status
git add .
git commit -m 'test'

推送
git push