Vue脚手架安装流程详解

这次写的是关于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规定样式作用范围的”
    ps：三种都是当下主流，小公司更喜欢使用less因为安装简单，使用简单，大公司使用scss和stylus，本人公司大多数情况下使用的是scss，scss其实也挺不错的，结构也容易懂。但stylus更好一些，因为它是集所有css scss sass less优点集一身的，所以我打算业余的时候要多用它，熟悉一下。加油！
• 3.解决数据请求跨域问题（这个问题涉及优点广，作者挑实用的讲）
  1.在vue.config.js/devServer/proxy配置

  devServer{
  proxy: {
  	'/ajax': {
  		target: '目标网址'，
  		changeOrigin: true   
  	}
  }
  
     
     
       
       
       
       
  

}
上是统一域名的情况下
不统一域名用下面
2.devServer{
proxy: {
‘/api’: {
target: ‘目标网址’，
changeOrigin: true,
pathRewrite: {
‘^/api’: ‘’
}
}
}
}

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)
       - 移动端禁用： 双指缩放

  - 移动端自适应
        - 方案
        - 手动计算rem
        - flex + rem 
        - 设计稿--> px ---- 移动端的rem 
        -  插件 px2rem  好用
        - http://www.dsiab.com/1601850633375
        - 去除浏览器默认样式
        - assets/style/reset.scss 
        - 在 app.vue/style中引入reset.scss 

 
 
   
   
   
   

以上就是今日的分享了，望各位前端兄弟们加油呀~