头条项目前的基本准备

安装依赖包

//正常安装
npm install
//如果国内下载国外包还是太慢, 除了指向淘宝镜像外, 还可以加上使用下面的命令加速 很多时候报node-gyp
npm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/
//

启动

npm run start

4.启动成功提示

测试 在浏览器中打开你链接解测试是否成功

http://127.0.0.1:3000/post

vue-cli 脚手架

一介绍
脚手架的作用就是将我们之前一个个慢慢安装慢慢调试的工具全部一次装好。
给我们马上开始开发
如果下载太慢
主要是 npm 默认是从国外服务器下载包，太不稳定了。建议切换成国内淘宝下载。
百度一下： npm 淘宝

npm config set registry https://registry.npm.taobao.org

二. 安装

@vue/cli (3.0 以上)
全局安装

npm install @vue/cli -g

调用命令是 vue create项目名

vue create hmtt-project

搭建项目

## 一. 前提, 脚手架工具

1. 打开终端 (最好使用管理员模式)
2. 全局安装 vue cli 3.x 以上 版本，可通过 vue -V 查看。

 npm install @vue/cli -g

如果安装报错, 或者以前已经安装过其他版本(2.x) 可以先卸载 (两个版本之间有冲突)
终端当中运行以下命令, 再执行上一步安装

// 新版脚手架工具卸载命令
npm uninstall @vue/cli -g
// 或更旧版本脚手架工具卸载命令
npm uninstall vue-cli -g

二. 用脚手架工具创建项目

为了避免其他代码的干扰, 建议创建一个空文件夹用来放置之后做的项目
我们这个项目叫做头条 这个文件夹名字也可以叫做 work / hmtt-projcet
在准备好的文件夹下面打开终端
使用命令创建项目 (其中 projectname 可以自己起, 不可以用大写)

vue create projectname

创建项目时的选项

按照这些选项答问题之后, 会自动创建项目, 不同机器环境可能稍有出入.
1.选一个预选项

选择需要的功能

选择 2.x 稳定版

是否 history 模式 选 no

选择 css 预处理器

存放配置文件的地址

是否设为默认值
否

成功后运行项目

根据提示运行项目开发服务器
打开页面

工作好习惯

一个项目用一个 VS Code 打开，这样才能更好的利用 Vs Code 自带的源代码管理器，管理我们的代码。

三. 把项目放到 git 上面

1 要有 码云或者 github 的账号, 需要注册(建议是码云, 国内速度较快)

2 在码云创建一个仓库用来存放我们的项目代码

1新建仓库

2.填写仓库资料

3.有了下面这个页面就证明 ok 了, 如果出错,不要紧直接重新创建一个即可(不要钱无限量)

3将本地刚刚创建好的项目文件传到 git 上面去

1. 将本地项目代码, 脚手架创建好的项目本来就有 git 系统, 如果没有, 可以在项目下面运行 git init 即可

2. 确认所有代码都已经提交, 没有正在修改中的文件

3. 将本地仓库推送到远程, 每个用户这两段命令不一样, 记得复制自己的就好了

4. 

5. 如果以前没有用过 git 或者报错说没有设定名字和 email 直接按提示运行即可

6. 运行第 3 步推送到远程时, 第一个终端命令没有提示是正常的

   运行第二个的时候就会进行代码的推送, 有可能询问你的用户名和密码,

   这个不能随意填写, 应该是你注册码云的时候的账号密码。

   (注意,码云问用户名其实不是用户名而是你注册的手机号或者邮箱, 码云中用户名就像昵称随时可以改)

7. 完成了上面的步骤, 刷新刚刚码云仓库的页面可以发现 已经有你本地的代码了

8. 

4. 稳住别慌,

万一搭建脚手架或者创建仓库出了问题

如果出了问题, 建议多按照步骤尝试几遍

这有利于你的技术提升

但是不要让他影响到我们的项目开发

如果你在玩脚手架或者玩 git 的时候, 感觉一团乱

相关配置

• Node 环境 14.15.2
• Vs Code 1.52
• 
  git 提交时忽略哪些文件
  
  src目录文件组成
  
  一. 别名 @
  

二. 修改 webpack 配置(如果需要)

你在这个脚手架里面找不到 webpack 的配置,
是因为脚手架把它封装起来了
假如要自定义 webpack 配置怎么办

1. 创建 vue.config.js (脚手架的配置文件, 默认并不存在, 需要的时候创建)
2. 配置 configureWebpack 属性

// vue.config.js
module.exports = {
  configureWebpack: {
    //添加或更改的webpack配置
  }
}

vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被自动加载。

三. 长度尺寸单位 vw

vw 其实就是一个百分比单位，viewport width 的意思 视口宽度，把视口分成了 100 份。

相关的尺寸有两个:

1vw 相当于 1% 的 视口宽度。

1vh 相等于 1%  的 视口高度。

可以使用使用 vw 实现页面尺寸适配。
为什么这里是 vw 而不用 % 做适配，因为 % 是相对于父级元素，而不是屏幕。

因为如果是百分号作为单位, 那么宽和高 各自会用不同的标准来取值

宽50% 高 50% 正方形都不能画出来。

如果用 vw 永远只用宽作为标准,那么就可以指定所有的相对尺寸

是因为 vw 有一个固定的参照物(宽度)

元素像素 / 设计稿宽度 * 100 = 以 vw 为单位的长度数据

如果想要方便使用这个长度单位

有两种方法

第一个方法是插件（了解即可，项目可维护性查）
可以利用插件 px-to-vw 来自动转换, 记得设置设计稿宽度为 360
插件使用

1. 设置好设计稿原宽度 (黑马头条的设计稿宽度是 360)
2. 输入像素之后, 按 alt + z
   缺点在于, 没法微调。
   第二个方法,是直接在 less 写计算公式, 然后用自动补全的方式辅助
   
   
   小结
   固定 px 还是 相对尺寸 rem / vw / rpx / % / em

• 项目中 rem 还是 vw ?
  rem 只是一个过渡的方法需要引入 js 库，vw 是 css 标准。
• % 还是 vw?
  %这个百分比没有一个固定的参照, 宽和高的百分比算出来不一样, vw 的话可以宽度为标准

四. 第三方依赖问题

• 或者怀疑第三方包出错或者不全 (比如装到一般卡死)
  解决办法是重装项目依赖, 直接删除掉 node_modules 文件夹
  重新 npm install

五. 如何开始一天的开发

因为是项目,所以每天会在同一个文件夹下面开发
使用 git 管理代码
我们有开发环境的命令, 和生产环境的命令
开发服务器的命令是 npm run serve
所以每天打开电脑, 开发之前先把服务器打开 (运行 npm run serve)

六. 图标库

地址: http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css
使用方式, 给标签 class 添加 iconfont 和下面显示的图标名,
这些图标可以设置字体大小和颜色
如

项目文件整理

现在脚手架显示默认页面, 也有一些预设样式和组件
我们需要清理干净开始我们的开发

一. 脚手架文件架构

二. 清理预设样式和页面

• 删除图标和 home 默认内容

• 删除默认样式 app.vue , 模板中只留下 router-view

• 重置公共样式 根实例 app.vue (因为这是最外层的根实例)

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
    
a{
    color: inherit;  /* CSS 关键词：继承 */
}

a:hover{
    text-decoration: none;
}

ul,li,ol{
    list-style: none;
}

引入公共图标库

在 App.vue 根实例当中引入公共图标库, 供所有页面使用
/* 在 style 当中引入字体图标文件 */
@import url(‘http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css’);