# 项目初始化

# 项目业务场景介绍

目标：熟悉项目的业务功能（新闻资讯类的APP的自媒体后台管理系统）

主要功能
- 登录功能
- 欢迎页面
- 内容管理
- 素材管理
- 发布文章
- 评论管理
- 粉丝管理
- 个人设置

# 项目技术栈介绍

目标：熟悉项目相关技术栈

ES6+ （编程语言）
vue （Vue核心）
vue-router （前端路由）
vue-cli （官方脚手架）
axios （接口调用库）
element-ui （UI组件库）
第三方包

# 项目初始化

创建项目（流程参考文档）

vue create hm-toutiao-pc-123

|-public  ------------- 项目SPA单页面和小图标
|-src  ---------------- 项目的源代码
    |-assets ---------- 项目中用到的静态资源
    |-components ------ 项目的公共组件
    |-router ---------- 项目的路由配置
    |-views ----------- 普通视图组件
    |-App.vue --------- 项目的跟组件
    |-main.js --------- 项目的入口文件
|-.browserslistrc  ---- 编译代码时支持的浏览器设置
|-.editorconfig  ------ 配置代码的整体风格
|-.eslintrc.js  ------- 验证代码的语法规则
|-.gitignore  --------- 忽略一些文件不让Git管理
|- babel.config.js ---- ES6转换相关配置
|- package.json  ------ 包的描述文件
|- README.md  --------- 项目的说明文档

项目代码分析
- main.js 入口文件
- App.vue 跟组件
- router
  - index.js 配置路由映射
- views 视图组件
  - Home.vue
  - Login.vue

# 基于git管理项目

目标：能够使用git进行项目代码管理

初始化仓库
- git init
添加代码到暂存区
- git add .
提交代码到本地仓库
- git commit -m
创建远程仓库
添加远程仓库的别名
- git remote add origin https://gitee.com/byte1031/hm-taotiao-pc-123.git
推送到远程仓库
- git push -u origin master

# 代码规范ESLint配置

# 介绍

无规矩不成方圆（正规团队对项目的代码是有严格规范）

代码的规范谁来保证？人工方式靠谱吗，不靠谱，所以需要工具

ESLint (opens new window) 是什么？是验证代码规范的工具（如果你写的代码不符合规范，它会告诉你哪里写错了），ESLint本身提供了一些规范，ESLint提供的这些规范我们做项目是全部遵循吗（大概率是遵循一部分），因此，就有一个问题：如果不同的团队单独指定规范的话，其实也挺乱的。所以说应该有一个通用的约定。
standard (opens new window) 是相对比较客观的一套通用规则，如果很多团队都采用，那么规范就统一了
ESLint负责规则验证，并且本身也提供了一些默认的规则，但是并不是统一的标准，需要自己定制
ESLint（法官）也可以基于standard（法律）这套相对标准的规则进行验证。

# 常见语法规则

使用两个字符实现代码缩进
字符串使用单引号
不再有冗余的变量（变量一旦定义必须使用）
结尾无分号
行首不要以，开头
关键字后面添加空格
函数名后加空格
坚持使用全等===，放弃==
~~一定要处理Node.js中的err~~
~~使用浏览器全局变量添加window~~
......

关于代码的语法的修改，可以利用lint命令：npm run lint

这个命令可以自动规范化代码的风格。

# 自定义规则

.eslintrc.js配置文件可以配置启用或者禁用那些规则
关于规则的取值
- off/0 表示关闭规则的验证
- warn/1 表示出错后进行警告（在命令行出现，不影响页面功能）
- error/2 表示出错后页面进行错误提示，无法进一步开发

{
    "rules": {
        'semi': 'warn',
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

规则的值如果是数组，那么数组两项的作用
- 第一项作用：规则的验证级别 (opens new window)
- 第二项作用：规则的配置选项，详细的规则选项参考ESLint (opens new window)

1、Vue脚手架项目提供了代码的规则验证谁负责规则的验证？ESLint 谁负责提供规则？Standard ESLint基于Standard进行验证 2、如果我们写的代码不符合规则，就会报错 3、所有需要解决错误才能继续开发 4、但是人工方式解决错误有点儿麻烦怎么人工解决错误？通过查看页面的提示（行号；错误特征字符串（错误信息的后面）），如果认识英文，那么直接就能够理解错误，如果理解不了英文，就把特征字符串复制，然后去standard官方网站（https://standardjs.com/rules-zhcn.html#javascript-standard-style）查询即可 5、所有可以借助命令自动解决npm run lint 6、如果希望自己再定义一下默认的规则，那么可以修改配置文件.eslintrc 如何修改？修改rules选项即可

# vscode配置

我们希望vscode帮我们解决代码规范问题（如果我们写的代码不规范，那么vscode帮我们修复问题）

脚手架的代码规范和vscode的代码规范示范一致？不一致

如何解决？可以修改脚手架的eslint配置让他迎合vscode（不建议）；修改vscode配置去迎合脚手架。

需要安装两个插件
- ESLint 负责验证规则
- Vetur 负责提供vue的语法规则

// # 每次保存的时候自动格式化 
"editor.formatOnSave": true,
// # 每次保存的时候将代码按eslint格式进行修复
// "eslint.autoFixOnSave": true, (已经过期)
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},

vue代码风格配置
- Vue代码风格依赖了 Prettier (opens new window)

"vetur.validation.template": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "semi": false, //不加分号
        "singleQuote": true, //用单引号
        "trailingComma": "none",
        "bracketSpacing": true,
        "tabWidth": 2,
        "arrowParens": "avoid"
    },
    "js-beautify-html": {
        // "wrap_line_length": 250, //换行长度
        "wrap_attributes": "auto", //属性换行 force-aligned
        // "end_with_newline": false
    }
},

# 组件库Element-UI

目标：熟悉Element-ui (opens new window)组件库基本用法

Element-UI封装好的现成的组件让我们直接使用，从而提高开发效率。

安装element-ui包

npm i element-ui

导入element-ui包

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

配置插件

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

+Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

直接参考官方网站的案例进行使用

<el-button type="primary">主要按钮</el-button>

# 基本路由配置

目标：配置项目的基本路由

安装路由组件

npm i vue-router

引入：src/router/index.js

import VueRouter from 'vue-router'

配置路由插件

import Vue from 'vue'
Vue.use(VueRouter )

实例化路由对象

const router = new VueRouter({
  routes: [
  	// 路由规则                    
  ]
})
export default router

在main.js挂载导出的实例

// 1.1 router文件夹 默认会加载文件夹下的index.js文件
// 1.2 index 含义 索引文件（默认会访问的文件）
// 1.3 index.js index.vue index.json 支持三种格式，优先级和我书写的顺序一致
// 2.1 vue-cli提供的一个绝对路径别名  src绝对路径
+import router from '@/router'
// 如果文件夹中js文件名称是index.js可以省略
// import router from '@/router/index.js'
// import router from '@/router'
new Vue({
+ router,
  render: h => h(App)
}).$mount('#app')

# 主页和登录页路由配置

跟组件配置 App.vue

<template>
  <div id="app">
    <!-- 跟组件只有一个路由填充位 -->
    <router-view/>
  </div>
</template>

全局路由配置

import Home from '@/views/Home.vue'
import Login from '@/views/Login.vue'

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/home', component: Home }
]

← Home 登录模块 →