2020-11-11，单身快乐

作者: 干千翻
来源: 51数据库
2021-09-21

咳咳，给忘记了，话不多说更新更新

>这次写的是关于vue框架开发的一些流程，可能不是那么详细，请大牛们斧正（主要是关于代码方面的我尽量细讲，工作过程暂时不讲）

1.安装

cnpm/npm i @vue/cli -g 这里cnpm是指用淘宝源，因为下载速度更快下载vue的脚手架

2.创建项目

vue create 项目名称在终端创建项目
选择（可以根据自己的码代码的风格选用大部分人会带上eslint代码规范工具）
优雅降级
css预处理器
ts
vue版本

3.启动项目

启动项目 yarn serve / npm run serve (这里我要说yarn和npm都是包管理工具，但是yarn是最新的，经过重新设计的npm客户端，它的下载和安装速度比npm快了一点点，当然要先下载cnpm/npm i yarn -g)
yarn和npm主要区别
1.yarn不需要互联网连接就能安装本地缓存的依赖项，提供了离线模式，npm没有
2.yarn更加简洁，能更加直观打印重要的信息，还有语义清晰

4.使用项目

1.组件导入
import Hello from ‘相对路径’
通过components注册
2.style
- css
  less
  scss
  stylus
  “scoped规定样式作用范围的”
  (这里作者有话说，三种都是当下主流，小公司使用less因为安装简单，使用简单，但是遇到大量的自定义函数和运算符就hold不住的，大公司使用scss和stylus，好多人说scss安装难“咳咳”作者工作也没怎么用过就不知道怎么解决了。反正强烈推荐stylus,它支持大括号和缩进两种语法，甚至可以随性地混着写用起来舒服，唯一一点不好的是老找不到结束范围)
3.解决数据请求跨域问题（这个问题涉及优点广，作者挑实用的讲）
1.在vue.config.js/devServer/proxy配置
```
devServer{
proxy: {
	'/ajax': {
		target: '目标网址'，
		changeOrigin: true   
	}
}
```

}
上是统一域名的情况下
不统一域名用下面
2.devServer{
proxy: {
‘/api’: {
target: ‘目标网址’，
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}
（作者有话说：在vue-cli3中,默认changeOrigin的值是true,意味着host设置成target,这与cue-cli2不一致,vue-cli2这个默认值是false。了解可学习link.）

5.各个文件取名以及作用

src/pages | src/views | src/routes 展示页面
- src/utils 公共函数封装库
- src/interface ts定义的类型
- src/router 路由 — 页面跳转
- src/store 数据存储和管理的目录
- src/components 公共组件
- src/assets 静态资源文件夹
- fonts 字体包
- img 静态图片

6.进行移动端配置

移动端兼容：添加meta标签

       - [参考文档](https://blog.csdn.net/yc123h/article/details/51356143)
       - 移动端禁用： 双指缩放
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  - 移动端自适应
        - 方案
        - 手动计算rem
        - flex + rem 
        - 设计稿--> px ---- 移动端的rem 
        -  插件 px2rem  好用
        - http://www.dsiab.com/1601850633375
        - 去除浏览器默认样式
        - assets/style/reset.scss 
        - 在 app.vue/style中引入reset.scss