2020-11-11，单身快乐

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

>这次写的是关于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 

以上就是今日的分享了，最后感叹一下“代码的海洋里，没回头路，一踏出就天涯海角见”

本文地址：https://blog.csdn.net/dndhcjdks/article/details/109627314