欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

2020-11-11,单身快乐

程序员文章站 2022-06-25 21:42:56
咳咳,给忘记了,话不多说更新更新这次写的是关于vue框架开发的一些流程,可能不是那么详细,请大牛们斧正(主要是关于代码方面的,工作流程就暂时不讲)1.安装cnpm/npm i @vue/cli -g 这里cnpm是指用淘宝源,因为下载速度更快 下载vue的脚手架2.创建项目vue create 项目名称 在终端创建项目选择 (可以根据自己的码代码的风格选用大部分人会带上eslint代码规范工具)优雅降级css预处理器tsvue版本3.启动项目启动项目 yarn...

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

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