You辉编程_用vue3.0开发移动app的流程

1.真正vue开发是需要脚手架来创建vue项目的
2.安装node,内包含npm(包管理工具)
3.在命令行安装nrm(镜像源):npm install nrm -g ; 
使用taobao镜像,在下载依赖包速度会快一点,nrm use taobao
4.安装脚手架:npm install -g @vue/cli || 安装指定版本:npm install @vue/cli@版本号
5.vue项目的创建
在VScode里:Ctrl + ~ 进入控制台;
切换到自己想创建的目录:
eg:
PS D:\koa\vue3.0> cd vue-3
PS D:\koa\vue3.0\vue-3> cd vue21
PS D:\koa\vue3.0\vue-3\vue21> vue create 项目名
6.vue 需要使用axios发送ajax请求
-安装axios:npm install axios --save
-axios发送ajax请求的封装
import axios from 'axios'

const instance = axios.create({
  baseURL: '接口地址',
  timeout: 10000
})
const get = (url, params = {}) => {
  return new Promise((resolve, reject) => {
    instance.get(url, { params }).then((response) => {
      resolve(response.data)
    }, err => {
      reject(err)
    })
  })
}

const post = (url, data = {}) => {
  return new Promise((resolve, reject) => {
    instance.post(url, data, {
      headers: {
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      resolve(response.data)
    }, err => {
      reject(err)
    })
  })
}
export { post, get }


7.统一css在不同浏览器的样式差异插件:npm install normalize.css --save
8.不同设备的展示适配
public-->index.html:
<script>
     //检测当前设备的屏幕宽度
     var width = document.documentElement.clientWidth || document.body.clientWidth;
     // 按比例进行适配
     var ratio = width / 375;
     // 计算当前设备的html的font-size的大小
     var fontSize = 100 * ratio;
     // 设置当前设备的html的font-size的字体大小
     document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
</script>
9.项目上线
-在项目目录下新建vue.config.js文件
module.exports = {
  publicPath: './项目名字'
}
-在项目的目录下执行 npm run build 命令,会调用webpack进行打包,
打包在了dist文件下,dist文件下的代码就是上
线的代码。

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值